自定义底部tabbar点击某一个后没有显示相应状态
发布于 5 年前 作者 fanxia 13425 次浏览 来自 问答

根据官方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
      })
    }
  }
})
1 回复

在引用tabbar的每个页面的onshow里，增加

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

selected的值是该页面的索引

回到顶部