diff --git a/example/app.json b/example/app.json
index e96a0617..f7f0015a 100644
--- a/example/app.json
+++ b/example/app.json
@@ -121,6 +121,7 @@
"van-switch": "./dist/switch/index",
"van-switch-demo": "./dist/switch/demo/index",
"van-tab": "./dist/tab/index",
+ "van-tab-demo": "./dist/tab/demo/index",
"van-tabs": "./dist/tabs/index",
"van-tabbar": "./dist/tabbar/index",
"van-tabbar-item": "./dist/tabbar-item/index",
diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js
index 4860a035..cc11dfda 100644
--- a/example/pages/tab/index.js
+++ b/example/pages/tab/index.js
@@ -1,43 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- tabs2: [1, 2],
- tabs3: [1, 2, 3],
- tabs4: [1, 2, 3, 4],
- tabs6: [1, 2, 3, 4, 5, 6],
- tabsWithName: [
- { name: 'a', index: 1 },
- { name: 'b', index: 2 },
- { name: 'c', index: 3 }
- ]
- },
-
- onClickDisabled(event) {
- wx.showToast({
- title: `标签 ${event.detail.index + 1} 已被禁用`,
- icon: 'none'
- });
- },
-
- onChange(event) {
- wx.showToast({
- title: `切换到标签 ${event.detail.index + 1}`,
- icon: 'none'
- });
- },
-
- onClickNavRight() {
- wx.showToast({
- title: '点击 right nav',
- icon: 'none'
- });
- },
-
- onClick(event) {
- wx.showToast({
- title: `点击标签 ${event.detail.index + 1}`,
- icon: 'none'
- });
- }
-});
+Page();
diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml
index 67c12433..7600bfd3 100644
--- a/example/pages/tab/index.wxml
+++ b/example/pages/tab/index.wxml
@@ -1,149 +1 @@
-
-
-
-
- {{ '内容' + item }}
-
-
-
-
-
-
-
-
-
- {{ '内容' + item.index}}
-
-
-
-
-
-
-
-
-
- {{ '内容' + item }}
-
-
-
-
-
-
-
-
-
- {{ '内容' + item }}
-
-
-
-
-
-
-
-
-
- {{ '内容' + item }}
-
-
-
-
-
-
-
-
-
- {{ '内容' + item }}
-
-
-
-
-
-
-
-
-
- {{ '内容' + item }}
-
-
-
-
-
-
-
-
-
- {{ '内容' + item }}
-
-
-
-
-
-
-
-
-
- {{ '内容' + item }}
-
-
-
-
-
-
-
-
-
-
- {{ '内容' + item }}
-
-
-
-
+
diff --git a/packages/stepper/demo/index.wxml b/packages/stepper/demo/index.wxml
index 3007ef89..7d3d3de3 100644
--- a/packages/stepper/demo/index.wxml
+++ b/packages/stepper/demo/index.wxml
@@ -6,7 +6,7 @@
-
+
diff --git a/packages/tab/demo/index.json b/packages/tab/demo/index.json
new file mode 100644
index 00000000..077635e6
--- /dev/null
+++ b/packages/tab/demo/index.json
@@ -0,0 +1,9 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-tab": "../../tab/index",
+ "van-tabs": "../../tabs/index",
+ "van-icon": "../../icon/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/tab/index.wxss b/packages/tab/demo/index.less
similarity index 89%
rename from example/pages/tab/index.wxss
rename to packages/tab/demo/index.less
index 3521a9ec..9a91d877 100644
--- a/example/pages/tab/index.wxss
+++ b/packages/tab/demo/index.less
@@ -1,7 +1,3 @@
-page {
- padding-bottom: 300px;
-}
-
.content {
padding: 20px;
background-color: #fff;
diff --git a/packages/tab/demo/index.ts b/packages/tab/demo/index.ts
new file mode 100644
index 00000000..8f126791
--- /dev/null
+++ b/packages/tab/demo/index.ts
@@ -0,0 +1,45 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ tabs2: [1, 2],
+ tabs3: [1, 2, 3],
+ tabs4: [1, 2, 3, 4],
+ tabs6: [1, 2, 3, 4, 5, 6],
+ tabsWithName: [
+ { name: 'a', index: 1 },
+ { name: 'b', index: 2 },
+ { name: 'c', index: 3 },
+ ],
+ },
+
+ methods: {
+ onClickDisabled(event) {
+ wx.showToast({
+ title: `标签 ${event.detail.index + 1} 已被禁用`,
+ icon: 'none',
+ });
+ },
+
+ onChange(event) {
+ wx.showToast({
+ title: `切换到标签 ${event.detail.index + 1}`,
+ icon: 'none',
+ });
+ },
+
+ onClickNavRight() {
+ wx.showToast({
+ title: '点击 right nav',
+ icon: 'none',
+ });
+ },
+
+ onClick(event) {
+ wx.showToast({
+ title: `点击标签 ${event.detail.index + 1}`,
+ icon: 'none',
+ });
+ },
+ },
+});
diff --git a/packages/tab/demo/index.wxml b/packages/tab/demo/index.wxml
new file mode 100644
index 00000000..67c12433
--- /dev/null
+++ b/packages/tab/demo/index.wxml
@@ -0,0 +1,149 @@
+
+
+
+
+ {{ '内容' + item }}
+
+
+
+
+
+
+
+
+
+ {{ '内容' + item.index}}
+
+
+
+
+
+
+
+
+
+ {{ '内容' + item }}
+
+
+
+
+
+
+
+
+
+ {{ '内容' + item }}
+
+
+
+
+
+
+
+
+
+ {{ '内容' + item }}
+
+
+
+
+
+
+
+
+
+ {{ '内容' + item }}
+
+
+
+
+
+
+
+
+
+ {{ '内容' + item }}
+
+
+
+
+
+
+
+
+
+ {{ '内容' + item }}
+
+
+
+
+
+
+
+
+
+ {{ '内容' + item }}
+
+
+
+
+
+
+
+
+
+
+ {{ '内容' + item }}
+
+
+
+
diff --git a/packages/tab/test/__snapshots__/demo.spec.ts.snap b/packages/tab/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..8e4aa74d
--- /dev/null
+++ b/packages/tab/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,1552 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 标签 1
+
+
+
+
+
+
+ 标签 2
+
+
+
+
+
+
+ 标签 3
+
+
+
+
+
+
+ 标签 4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通过名称匹配
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 标签 1
+
+
+
+
+
+
+ 标签 2
+
+
+
+
+
+
+ 标签 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 横向滚动
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 标签 1
+
+
+
+
+
+
+ 标签 2
+
+
+
+
+
+
+ 标签 3
+
+
+
+
+
+
+ 标签 4
+
+
+
+
+
+
+ 标签 5
+
+
+
+
+
+
+ 标签 6
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 禁用标签
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 标签 1
+
+
+
+
+
+
+ 标签 2
+
+
+
+
+
+
+ 标签 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 样式风格
+
+
+
+
+
+
+
+
+
+
+
+
+ 标签 1
+
+
+
+
+
+
+ 标签 2
+
+
+
+
+
+
+ 标签 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 点击事件
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 标签 1
+
+
+
+
+
+
+ 标签 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 粘性布局
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 标签 1
+
+
+
+
+
+
+ 标签 2
+
+
+
+
+
+
+ 标签 3
+
+
+
+
+
+
+ 标签 4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 切换动画
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 标签 1
+
+
+
+
+
+
+ 标签 2
+
+
+
+
+
+
+ 标签 3
+
+
+
+
+
+
+ 标签 4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 滑动切换
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 标签 1
+
+
+
+
+
+
+ 标签 2
+
+
+
+
+
+
+ 标签 3
+
+
+
+
+
+
+ 标签 4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义标题
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 标签 1
+
+
+
+
+
+
+ 标签 2
+
+
+
+
+
+
+
+
+
+
+
+ 标签 3
+
+
+
+ 99
+
+
+
+
+
+
+
+ 标签 4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/tab/test/demo.spec.ts b/packages/tab/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/tab/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+ const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+ rootPath: path.resolve(__dirname, '../../'),
+ });
+ const comp = simulate.render(id);
+ comp.attach(document.createElement('parent-wrapper'));
+ expect(comp.toJSON()).toMatchSnapshot();
+});