一,按照小程序官方文档配置自定义tabBar
{
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/component/index",
"text": "组件"
}, {
"pagePath": "page/API/index",
"text": "接口"
}]
},
"usingComponents": {
"t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
"t-tab-bar-item": "tdesign-miniprogram/tab-bar/tab-bar-item"
}
}
二，添加 tabBar 代码文件
在代码根目录下添加入口文件:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
三，编写 tabBar 代码
- 在custom-tab-bar/index.wxml里，
<t-tab-bar value="{{value}}" bindchange="onChange" color="{{['#0EBD8D', 'rgba(0, 0, 0, .9)']}}">
<t-tab-bar-item wx:for="{{tabBar}}" wx:for-item="item" wx:for-index="index" wx:key="index" icon="{{item.icon}}" value="{{item.value}}">
{{item.label}}
</t-tab-bar-item>
</t-tab-bar>
在custom-tab-bar/index.js里，注意，一定是Component里而不是page里
Component({
data: {
value:0,
tabBar: [{
url:'/pages/index/index',
icon: 'home',
label: '首页',
},{
url:'/pages/order/order',
icon: 'file',
label: '订单',
}, {
url:'/pages/my/my',
icon: 'user',
label: '我的'
}]
},
methods: {
onChange(e) {
//console.log(e)
this.setData({ value: e.detail.value });
wx.switchTab({
url: this.data.tabBar[e.detail.value].url
});
},
init() {
const page = getCurrentPages().pop();
this.setData({
value: this.data.tabBar.findIndex(item => item.url === `/${page.route}`)
});
}
},
})
在custom-tab-bar/index.json里，
"component": true,
"usingComponents": {
"t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
"t-tab-bar-item": "tdesign-miniprogram/tab-bar/tab-bar-item"
}
四，在使用tabBar的页面的js里，
onShow: function () {
this.getTabBar().init();
}
提供