一、在app.json中开启"custom": true,
1. "tabBar": {
1. "custom": true,
1. "list": [
1. {
1. "pagePath": "pages/home/home",
1. "text": "首页",
1. "iconPath": "/icon/shouye.png",
1. "selectedIconPath": "/icon/shouye-o.png"
1. },
1. {
1. "pagePath": "pages/class/class",
1. "text": "分类",
1. "iconPath": "/icon/fenlei.png",
1. "selectedIconPath": "/icon/fenlei-o.png"
1. },
1. {
1. "pagePath": "pages/Preferential/Preferential",
1. "text": "优惠券",
1. "iconPath": "/icon/youhuiquan.png",
1. "selectedIconPath": "/icon/youhuiquan-o.png"
1. },
1. {
1. "pagePath": "pages/shop/shop",
1. "text": "购物车",
1. "iconPath": "/icon/gouwuche.png",
1. "selectedIconPath": "/icon/gouwuche-o.png"
1. },
1. {
1. "pagePath": "pages/user/user",
1. "text": "我的",
1. "iconPath": "/icon/wode.png",
1. "selectedIconPath": "/icon/wode-o.png"
1. }
1. ]
1. }
\
二、在跟目录下创建custom-tab-bar并添加组件文件
三、index.wxml代码
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item
// for循环数组
wx:for="{{switchData}}"
wx:key="index"
// 绑定点击事件
bindtap="switch"
// 获取当前的路径
data-path="{{item.pagePath}}">
<view style="text-align: center;">
<text class="{{item.iconPath}}" style="font-size: 50rpx;"></text>
</view>
<view>{{item.text}}</view>
</van-tabbar-item>
</van-tabbar>
四、index.json代码
{
"component": true,
"usingComponents": {
// 引入Vant
"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index"
}
}
五、index.js代码
// custom-tab-bar/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
// tabbar高亮
active: 0,
switchData: [{
// tabbar跳转路径
"pagePath": "../home/home",
// tabbar 内容
"text": "首页",
// tabbar 图标
"iconPath": "iconfont icon-shouye",
},
{
"pagePath": "../class/class",
"text": "分类",
"iconPath": "iconfont icon-fenlei",
},
{
"pagePath": "../Preferential/Preferential",
"text": "优惠券",
"iconPath": "iconfont icon-wodeyouhuiquan",
},
{
"pagePath": "../shop/shop",
"text": "购物车",
"iconPath": "iconfont icon-gouwuche",
},
{
"pagePath": "../user/user",
"text": "我的",
"iconPath": "iconfont icon-wode",
},
],
},
/**
* 组件的方法列表
*/
methods: {
switch (e) {
let url = e.currentTarget.dataset.path
wx.switchTab({
url,
})
}
}
})
最后在每个tabbar页面的onLoad中添加
onLoad(options) {
this.getTabBar().setData({
active: 0
})
},
