微信小程序tabbar 使用swtichTab

月光魔力鸭

2021-01-15 14:08 阅读 2275 喜欢 0 tabbar 微信小程序

昨天实现一个tabbar的时候发现怎么都无法跳转，直接拿的官方的demo，后来才发现是自定义tabbar的问题。

资料

实现效果

首屏为登录页面，登录成功后跳转到tabbar ，然后在tabbar内切换。

出现问题

最开始以为这个作为一个组件，直接引入就可以了，但是后边跳转的时候总是提示 switchTab:fail can not switch to no-tabBar page 说是页面没有包含tabbar ,我还特意检查了一遍，各个page都引入了...

太傻太天真... 仔细看了api发现必须要在 app.json文件中定义（我是自定义tabbar,直接复制的官网提供的demo）。

注意custom字段

解决

在 app.json 中增加tabbar相关的数据

修改custom-tab-bar组件数据

这里碰到了一个问题，在组件中pagePath属性怎么配置都不行（_大神若有高见请评论发我，感谢_），我之前是分开不同的文件夹的，路径为全路径pages/buss/center/center ，然后总是提示找不到，路径不对...心塞。最后将tabbar的页面全部放在了一个文件夹内。

最后还发现... 点击底部图标菜单后，并没有切换选中状态,最后在各个tabbar页面中增加了以下函数.

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2 //根据数组的index进行修改，不是固定的。
      })
    }
  },

太难了，其实之前有封装过一个tabbar ，比较类似的，但是用的是navigateTo 最后跳转了几次后就完蛋了..

转载请注明出处: https://chrunlee.cn/article/mini-program-tabbar.html

感谢支持!

赞赏支持

喜欢