微信小程序自定義tab-bar。
tab-bar使用tdesign中的t-tab-bar文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-574928.html
1 在項(xiàng)目下新建custom-tab-bar文件夾，新建index 組件。
1.1 index.wxml中增加t-tab-bar
<t-tab-bar value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}">
<t-tab-bar-item wx:for="{{list}}" wx:key="index" value="{{item.value}}" icon="{{item.icon}}">
{{item.label}}
</t-tab-bar-item>
</t-tab-bar>
1.2在index.js中增加以下代碼
Component({
data: {
value: 0,
list: [
{value:0, pagePath: 'pages/home/index', label: '首頁(yè)', icon: 'home' },
{value:1, pagePath: 'pages/person-center/index', label: '個(gè)人中心', icon: 'user' }
],
},
methods: {
init(){
const page = getCurrentPages().pop();
let a=this.data.list.find(item=>item.pagePath === page.route)
this.setData({
value:a.value
});
},
onChange(e) {
this.setData({
value: e.detail.value
});
wx.switchTab({
url: '/' + this.data.list[e.detail.value].pagePath
});
}
},
});
2在app.json中配置tab
"tabBar": {
"selectedColor": "#33a3dc",
"backgroundColor": "#ffffff",
"color": "#000000",
"custom": true,
"list": [
{
"text": "首頁(yè)",
"pagePath": "pages/home/index"
},
{
"text": "個(gè)人中心",
"pagePath": "pages/person-center/index"
}
]
},
"usingComponents": {
"t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
"t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
}
3.在pages/home/index.js和pages/person-center/index.js中加入如下代碼
onShow() {
this.getTabBar().init();
},
編譯后即可實(shí)現(xiàn)自定義tab-bar。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-574928.html
到了這里，關(guān)于微信小程序custom-tab-bar的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
