diff --git a/example/app.json b/example/app.json
index c53dd123..83334e49 100644
--- a/example/app.json
+++ b/example/app.json
@@ -127,6 +127,7 @@
"van-tab-demo": "./dist/tab/demo/index",
"van-tabs": "./dist/tabs/index",
"van-tabbar": "./dist/tabbar/index",
+ "van-tabbar-demo": "./dist/tabbar/demo/index",
"van-tabbar-item": "./dist/tabbar-item/index",
"van-tag": "./dist/tag/index",
"van-toast": "./dist/toast/index",
diff --git a/example/pages/tabbar/index.js b/example/pages/tabbar/index.js
index f3ca71db..cc11dfda 100644
--- a/example/pages/tabbar/index.js
+++ b/example/pages/tabbar/index.js
@@ -1,27 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- active: 0,
- active2: 'home',
- active3: 0,
- active4: 0,
- active5: 0,
- active6: 0,
- icon: {
- normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
- active: 'https://img.yzcdn.cn/vant/user-active.png'
- }
- },
-
- onChange(event) {
- const { key } = event.currentTarget.dataset;
- this.setData({ [key]: event.detail });
- },
-
- handleChange(event) {
- const { key } = event.currentTarget.dataset;
- this.setData({ [key]: event.detail });
- wx.showToast({ title: `点击标签 ${event.detail + 1}`, icon: 'none' });
- }
-});
+Page();
diff --git a/example/pages/tabbar/index.wxml b/example/pages/tabbar/index.wxml
index 4dd153d6..7c14aa38 100644
--- a/example/pages/tabbar/index.wxml
+++ b/example/pages/tabbar/index.wxml
@@ -1,105 +1 @@
-
-
- 标签
- 标签
- 标签
- 标签
-
-
-
-
-
- 标签
- 标签
- 标签
- 标签
-
-
-
-
-
- 标签
- 标签
- 标签
- 标签
-
-
-
-
-
-
-
-
- 自定义
-
- 标签
- 标签
-
-
-
-
-
- 标签
- 标签
- 标签
- 标签
-
-
-
-
-
-
- 标签1
- 标签2
- 标签3
- 标签4
-
-
+
diff --git a/packages/tabbar/demo/index.json b/packages/tabbar/demo/index.json
new file mode 100644
index 00000000..0715db0a
--- /dev/null
+++ b/packages/tabbar/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-tabbar": "../../tabbar/index",
+ "van-tabbar-item": "../../tabbar-item/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/tabbar/index.wxss b/packages/tabbar/demo/index.less
similarity index 100%
rename from example/pages/tabbar/index.wxss
rename to packages/tabbar/demo/index.less
diff --git a/packages/tabbar/demo/index.ts b/packages/tabbar/demo/index.ts
new file mode 100644
index 00000000..955d1237
--- /dev/null
+++ b/packages/tabbar/demo/index.ts
@@ -0,0 +1,29 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ active: 0,
+ active2: 'home',
+ active3: 0,
+ active4: 0,
+ active5: 0,
+ active6: 0,
+ icon: {
+ normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
+ active: 'https://img.yzcdn.cn/vant/user-active.png',
+ },
+ },
+
+ methods: {
+ onChange(event) {
+ const { key } = event.currentTarget.dataset;
+ this.setData({ [key]: event.detail });
+ },
+
+ handleChange(event) {
+ const { key } = event.currentTarget.dataset;
+ this.setData({ [key]: event.detail });
+ wx.showToast({ title: `点击标签 ${event.detail + 1}`, icon: 'none' });
+ },
+ },
+});
diff --git a/packages/tabbar/demo/index.wxml b/packages/tabbar/demo/index.wxml
new file mode 100644
index 00000000..4dd153d6
--- /dev/null
+++ b/packages/tabbar/demo/index.wxml
@@ -0,0 +1,105 @@
+
+
+ 标签
+ 标签
+ 标签
+ 标签
+
+
+
+
+
+ 标签
+ 标签
+ 标签
+ 标签
+
+
+
+
+
+ 标签
+ 标签
+ 标签
+ 标签
+
+
+
+
+
+
+
+
+ 自定义
+
+ 标签
+ 标签
+
+
+
+
+
+ 标签
+ 标签
+ 标签
+ 标签
+
+
+
+
+
+
+ 标签1
+ 标签2
+ 标签3
+ 标签4
+
+
diff --git a/packages/tabbar/test/demo.spec.ts b/packages/tabbar/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/tabbar/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();
+});