微信小程序自定义tab-bar。
tab-bar使用tdesign中的t-tab-bar文章来源：https://www.toymoban.com/news/detail-574928.html
1 在项目下新建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: '首页', icon: 'home' },
{value:1, pagePath: 'pages/person-center/index', label: '个人中心', 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": "首页",
"pagePath": "pages/home/index"
},
{
"text": "个人中心",
"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();
},
编译后即可实现自定义tab-bar。文章来源地址https://www.toymoban.com/news/detail-574928.html
到了这里，关于微信小程序custom-tab-bar的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
