1、app.json中配置 tabbar

"tabBar": {"custom": true,"list":[{"pagePath": "pages/aboutFind/find/find","text": "发现","iconPath": "/public/image/icon_find2.png","selectedIconPath": "/public/image/icon_find1.png"},{"pagePath": "pages/index/index","text": "通行","iconPath": "/public/image/icon_go2.png","selectedIconPath": "/public/image/icon_go1.png"},{"pagePath": "pages/aboutMe/myInfo/myInfo","text": "我的","iconPath": "/public/image/icon_set2.png","selectedIconPath": "/public/image/icon_set1.png"}]
},

注意添加： "custom": true

2、新建根目录文件：custom-tab-bar， 并以组件形式新增文件

注意点：文件夹要在根目录下，名字为custom-tab-bar，并且里面的每个文件名为index

（1）index.wxml

{list}}" wx:key="index" class="cont-item">{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="{{item.search?'search':'item'}} {{selected === index ? 'on' : 'off'}}">{selected === index  ? item.selectedIconPath : item.iconPath}}">{selected === index ? 'selectedColor' : ''}}">{{item.text}}

（2）index.js

Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {selected: 0,color: "#fff",selectedColor: "#6777FD",list: [{pagePath: "/pages/aboutFind/find/find",text: "发现",iconPath: "/public/image/icon_find2.png",selectedIconPath: "/public/image/icon_find1.png"},{pagePath: "/pages/index/index",text: "通行",iconPath: "/public/image/icon_go2.png",selectedIconPath: "/public/image/icon_go1.png",search: true},{pagePath: "/pages/aboutMe/myInfo/myInfo",text: "我的",iconPath: "/public/image/icon_set2.png",selectedIconPath: "/public/image/icon_set1.png"}]},/*** 组件的方法列表*/methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({ url })}}
})

（3）index.json

{"component": true,"usingComponents": {}
}

（4）index.wxss

.tabBar {z-index: 100;width: 100%;position: fixed;bottom: 0;font-size: 28rpx;background-color: #fff;color: #636363;border-radius: 50rpx 50rpx 0px 0px;
}.cont {z-index: 0;height: calc(100rpx + env(safe-area-inset-bottom) / 2);padding-bottom: calc(env(safe-area-inset-bottom) / 2); padding-bottom: 30rpx;display: flex;justify-content: space-around;
}.cont .item {font-size: 24rpx;position: relative;width: 15%;text-align: center;padding: 0;display: block;height: auto;line-height: 1;margin: 0;background-color: inherit;overflow: initial;justify-content: center;align-items: center;padding-top: 20rpx;
}.cont .item:first-child {right: 45rpx;
}.cont .item:last-child {left: 45rpx;
}.cont .item image:first-child {width: 43rpx !important;height: 43rpx !important;margin: auto
}.cont .item image:last-child {width: 41rpx !important;height: 43rpx !important;margin: auto
}.cont .txt {margin-top: 20rpx;
}.cont .on {position: relative;
}.cont .on:not(:nth-child(2)):before {content: "";display: block;position: absolute;top: 0;width: 100%;height: 6rpx;background-color: #17C2D8;border-radius:120rpx !important;
}.cont .search {position: absolute;left: 50%;transform: translate(-50%,0);top: -50rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.cont .search image {width: 100rpx !important;height: 100rpx !important;z-index: 2;border-radius: 100%;
}.cont .search .txt {margin-top: 26rpx;
}.cont .selectedColor {color: #17C2D8;
}

3、在tab页面中使用

注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态

（1）find 自定义tabbar

onShow() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({selected: 0})}
}

（2）index 自定义tabbar

onShow() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({selected: 1})}
}

（3）myInfo 自定义tabbar

onShow() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({selected: 2})}
}

4、效果