小程序自定义tabbar

当前微信开发者工具版本： 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})}},})

实际效果如下：