当前微信开发者工具版本: Stable 1.06.2407110,如果比这个低建议直接用最新版
1.修改app.json,在json中加入如下代码,注意这里的样式和list并不会用到,但是需要存在,而下面的usingComponents里引入的custom-tab-bar则是自定义的tabbar
"tabBar": {"custom": true,"color": "#000000","selectedColor": "#000000","backgroundColor": "#000000","list": [{"pagePath": "pages/home/home","text": "首页"},{"pagePath": "pages/my/my","text": "我的"}]},"usingComponents": {"custom-tab-bar": "/components/custom-tab-bar/index"}
2.在app.json同级目录下自定义custom-tab-bar,文件夹名称必须叫这个custom-tab-bar,这里我用的tdesign组件
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-item/tab-bar-item","t-button": "tdesign-miniprogram/button/button"}
}
custom-tab-bar/index.ts:
// custom-tab-bar/index.ts
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {value: '/pages/home/home',list: [{ value: '/pages/home/home', label: '首页', icon: 'home' },{ value: '/pages/my/my', label: '我的', icon: 'user' },],},/*** 组件的方法列表*/methods: {// 切换页面onChange(e: any) {console.log(444, e.detail.value)this.setData({value: e.detail.value,});wx.switchTab({url: e.detail.value,success: () => {console.log(666)}})},}
})
custom-tab-bar/index.wxml:
<!--custom-tab-bar/index.wxml-->
<t-tab-bar t-class="t-tab-bar" value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}"><t-tab-bar-item wx:for="{{list}}" wx:key="value" value="{{item.value}}" icon="{{item.icon}}">{{item.label}}</t-tab-bar-item>
</t-tab-bar>
3.在需要的页面里引入custom-tab-bar组件,注意每个页面都需要引入
首页:pages/home/home.wxml
<!-- 底部tabbar -->
<custom-tab-bar/>
我的:pages/my/my.wxml
<!-- 底部tabbar -->
<custom-tab-bar/>
注:如果底部还存留有原有的tabbar,或者其他奇怪的问题或样式,则关闭微信开发者工具重新进入即可
4.设置切换后高亮
home.ts
// pages/home/home.ts
Page({/*** 生命周期函数--监听页面显示*/onShow() {// 设置tabbar高亮if (typeof this.getTabBar === 'function' ) {this.getTabBar().setData({value: 0})}},})
my.ts
// pages/my/my.ts
Page({/*** 生命周期函数--监听页面显示*/onShow() {// 设置tabbar高亮if (typeof this.getTabBar === 'function' ) {this.getTabBar().setData({value: 1})}},})
实际效果如下: