根据官方demo写的自定义底部tabbar，当在点击其中一个的时候没切换相应的状态，如图默认状态
当点击关注的时候路径变了，但是没有显示没有切换到关注
代码如下：
<cover-view class="tab-bar"> <cover-view class="tab-bar-border" style="background-color:{{borderColor}}"></cover-view> <cover-view class="progress" style="width:{{progress}};background-color:{{progressColor}}"></cover-view> <block wx:for="{{list}}" wx:key="index"> <cover-view class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <cover-view style="color: {{selected == index ? selectedColor : color}}" wx:if="{{item.text}}">{{item.text}}</cover-view> <cover-image src="{{selected == index ? item.selectedIconPath : item.iconPath}}" class="single-img" wx:else></cover-image> </cover-view> </block></cover-view> |
Component({ data: { selected: 0, color: "#7A7E83", selectedColor: "#fff", borderColor: "rgba(0, 0, 0, 0.33)", progress: '80%', progressColor: "#f40", list: [{ pagePath: "/index/index/index", iconPath: "/image/icon_component.png", selectedIconPath: "/image/icon_component_HL.png", text: "首页" }, { pagePath: "/index/follow/follow", iconPath: "/image/icon_API.png", selectedIconPath: "/image/icon_API_HL.png", text: "关注" }, { pagePath: "/index/record/record", iconPath: "/image/icon_API.png", selectedIconPath: "/image/icon_API_HL.png", text: "" }] }, attached() {}, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({ url }) this.setData({ selected: data.index }) } }}) |
在引用tabbar的每个页面的onshow里，增加
if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 }) }
selected的值是该页面的索引