微信小程序中切换身份看到不同的导航栏可以用自定义的custom-tab-bar
custom-tab-bar index.js
const app = getApp();Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#3cc51f",list:[]},attached() {this.setData({list: app.globalData.list,})},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url })this.setData({selected: data.index})}}})
custom-tab-bar index.wxml
<!--miniprogram/custom-tab-bar/index.wxml--><cover-view class="tab-bar"><cover-view class="tab-bar-border"></cover-view><cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image><cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view></cover-view></cover-view>
custom-tab-bar index.wxss
.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5);}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;}.tab-bar-item cover-image {width: 27px;height: 27px;}.tab-bar-item cover-view {font-size: 10px;}
在这里插入图片描述
F,t_70)
在这里插入图片描述
在每一个tabbar的页面加上这个
