tabBar跳转失败+颜色双击才改变

tabBar跳转失败

昨天将效果做出来了，然后今天做页面的时候，突然发现页面不能进行切换，原来是压根没有设置，看了官网，应该使用 wx.switchTab() 进行tabbar的跳转。

按照官网的方法进行了配置，但是页面并未跳转，控制台输出的错误是：

我的custom-tab-bar文件夹中的index.js中的代码是：

// pages/custom-tab-bar/index.js
Component({
  data: {
    active: 0,
    "list": [
      {
        "pagePath": "/pages/shou/shou",
        "iconPath": "/images/tabbar/shou.png",
        "selectedIconPath": "/images/tabbar/shou1.png",
        "text": "首页"
      },
      {
        "pagePath": "/pages/gou/gou",
        "iconPath": "/images/tabbar/gou.png",
        "selectedIconPath": "/images/tabbar/gou1.png",
        "text": "收购"
    }]
},
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      let index = event.detail
      // 切换tabBar
      switch(index){
        case 0:
          wx.switchTab({
            url: "../pages/shou/shou"
          });
          break;
        case 1:
          wx.switchTab({
            url: "../pages/gou/gou",
          });
          break;
      }
      this.setData({active: index})
    },
},
})

错误的原因是路径不对。

然后我就去掉了前面方法中路径前的**..**，奇迹的事情发生了，点击可以实现跳转了。

methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      let index = event.detail
      // 切换tabBar
      switch(index){
        case 0:
          wx.switchTab({
            url: "/pages/shou/shou"
          });
          break;
        case 1:
          wx.switchTab({
            url: "/pages/gou/gou",
          });
          break;
      }
      this.setData({active: index})
    }
}

颜色双击才改变

然后有出现了一个新的问题，那就是，点击可以跳转了，但是颜色会点击两次才显示。

这个的问题其实官方说了的，然后我们也可以去官网的自定义tabBar看。

如上如，官网是这么说的，然后我看了它的示例代码，发现其中有一个这样的代码：

onShow: function () {
    if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
            active: 1 // 这里是放每个tabbar的索引值
            // 第一个是0
            // 第二个是1
            // 以此类推
        })
    }
},

我们需要在每个tabbar文件夹中的 .js 都添加上这些代码！！！

然后你就可以实现页面切换和颜色的切换同步了。

展示下我的代码：

custom-tab-bar/index.js

Component({
  data: {
    active: 0,
    "list": [
      {
        "pagePath": "/pages/shou/shou",
        "iconPath": "/images/tabbar/shou.png",
        "selectedIconPath": "/images/tabbar/shou1.png",
        "text": "首页"
      },
      {
        "pagePath": "/pages/gou/gou",
        "iconPath": "/images/tabbar/gou.png",
        "selectedIconPath": "/images/tabbar/gou1.png",
        "text": "收购"
    },
     
      {
        "pagePath": "/pages/fa/fa",
        "iconPath": "/images/tabbar/fa.png",
        "selectedIconPath": "/images/tabbar/fa.png"
      },
      {
        "pagePath": "/pages/xiao/xiao",
        "iconPath": "/images/tabbar/xiao.png",
        "selectedIconPath": "/images/tabbar/xiao1.png",
        "text": "消息",
        "info":1
    },
      {
        "pagePath": "/pages/wo/wo",
        "iconPath": "/images/tabbar/wo.png",
        "selectedIconPath": "/images/tabbar/wo1.png",
        "text": "我的"
    }]
},
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      let index = event.detail
      // 切换tabBar
      switch(index){
        case 0:
          wx.switchTab({
            url: "/pages/shou/shou"
          });
          break;
        case 1:
          wx.switchTab({
            url: "/pages/gou/gou",
          });
          break;
        case 2:
          wx.switchTab({
            url: "/pages/fa/fa"
          });
          break;
        case 3:
          wx.switchTab({
            url: "/pages/xiao/xiao"
          });
          break;
        case 4:
          wx.switchTab({
            url: "/pages/wo/wo"
          });
          break;
      }
      // 这时候会发现需要点击两次才能改变tabBar的颜色
      // 解决办法是去每个tabbar页面加一些代码（官网也说了的）
      // https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
      // 加了上面的代码之后，下面这一行代码就没必要了
      // 但通常还是会留着
      this.setData({active: index})
    },
},
})

custom-tab-bar/index.wxml

<van-tabbar class="vantTabbar" active="{{ active }}" active-color="#07c160" inactive-color="#000" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{ item.info ? item.info : ''}}">
    <image slot="icon" src="{{ item.iconPath }}" mode="contain" style="width: 55rpx; height: 55rpx;" />
    <image slot="icon-active" src="{{ item.selectedIconPath }}" mode="aspectFit" style="width: 55rpx; height: 55rpx;" />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

custom-tab-bar/index.wxss

.vantTabbar {
  display: flex;
}

gou/gou.js

// pages/gou/gou.js
Page({
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          active: 1
        })
      }
  },
})

shou/shou.js

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