diff --git a/example/pages/tabbar/index.js b/example/pages/tabbar/index.js index 8eaf3706..f3ca71db 100644 --- a/example/pages/tabbar/index.js +++ b/example/pages/tabbar/index.js @@ -7,6 +7,7 @@ Page({ 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' @@ -16,5 +17,11 @@ Page({ 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/example/pages/tabbar/index.wxml b/example/pages/tabbar/index.wxml index 4a1dac9c..bd4ddc6e 100644 --- a/example/pages/tabbar/index.wxml +++ b/example/pages/tabbar/index.wxml @@ -87,3 +87,19 @@ 标签 + + + + + 标签1 + 标签2 + 标签3 + 标签4 + + diff --git a/packages/tabbar/README.md b/packages/tabbar/README.md index edb0c4ab..5b387c52 100644 --- a/packages/tabbar/README.md +++ b/packages/tabbar/README.md @@ -139,6 +139,36 @@ Page({ }); ``` + +### 切换标签事件 + +```html + + 标签1 + 标签2 + 标签3 + 标签4 + +``` + +```javascript +Page({ + data: { + active: 0, + }, + onClick(event) { + wx.showToast({ + title: `点击标签 ${event.detail + 1}`, + icon: 'none' + }); + } +}); +``` + + ### 结合自定义 tabBar 请参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html) 与 [代码片段](https://developers.weixin.qq.com/s/FjLU4mmp7r9s)