微信小程序自定义tab-bar。
tab-bar使用tdesign中的t-tab-bar

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。