微信小程序tabbar 使用swtichTab

微信小程序tabbar 使用swtichTab

月光魔力鸭

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

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

资料

实现效果

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

出现问题

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

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

注意custom字段

解决

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

  1. 修改custom-tab-bar组件数据

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

  1. 最后还发现... 点击底部图标菜单后,并没有切换选中状态,最后在各个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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
之前看知乎相中了一个想法,给宝宝做一个站,上传生活的日常照片啊、视频之类的,存储肯定是在自己家里,然后做个穿透这样..开始做的时候又想着是时候接触下这些东西了,虽然公司都一点不用,但是自己没事接触下拓展下也是好的。
登录方式现在非常多,不过像我这种小站让用户自己注册基本是不可能的了,只能依赖现有的第三方的登录来集成,之前有集成github,不过这个太过针对性,这里准备集成QQ互联登录,慢慢记录下。
前几天同事抱怨说微博太费劲了... 一万多条记录,可能会把他累死,我心想.. 重复工作不都可以用程序代替么..
BUG 报错Tainted canvases may not be exported 。 在通过canvas 调用 toDataURL的时候出现的问题。
写到这里,基本上就完成了我之前一篇文章中写的,我要做一个自己的图床的小程序了。在最初我要做图床的时候,发现在谷歌扩展程序上一无所知,所以才开始学习的这个,到这一步,至少能勉强能跑通自己的小程序了。
当我们使用web打印相关的解决方案的时候,还有不少小坑值得注意下,同时需要了解几个小技巧提升在web打印上的友好度,以下整理一些常见的小技巧
最近有个小功能需要一些基础数据,找了一下在小程序上有发现,暂时还没找到他的网站,想着把这些数据爬一些下来做为基础数据使用的。本来还想着直接反编译小程序的,没想到微信变更了加密方式,以前反编译的路子走不通了。
最近在做直播,是用的webrtc,然后找的免费的starrtc ,当然,可能由于种种原因吧.. 用起来并没有特别顺畅,后续还希望能够深入这部分,从现在开始学习..当然,websocket 是顺带的,可以用来发消息什么的肯定也是要用到的。