小程序P90 14.初步实现自定义的tabBar效果
2、 添加 tabBar 代码文件
自定义tabBar|微信开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
在代码根目录下添加入口文件:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
3、自定义tabBar标签栏:https://vant-ui.github.io/vant-weapp/#/tabbar
在app.json或index.json中引入组件,详细介绍见快速上手。
"usingComponents": {
"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index"
}
基础用法
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
Page({
data: {
active: 0,
},
onChange(event) {
// event.detail 的值为当前选中项的索引
this.setData({ active: event.detail });
},
});
- 复制链接
- 举报