收藏
回答

如和优雅的实现tabBar item 的动态增减?

  1. 需求

    部分用户登录,tabbar item个数为3,部分用户登录为4.

  2. 开发过程中遇到的问题

    i.我们尝试了 wx.setTabBarItem这个api,但是这个api只能改变tabbar中每一项的文字,图标,和badge信息,无法修改tabbar中每一项的路径,更不用说动态的增减tabbaritem的数目了。

    ii.我们使用的是uniapp框架,于是便尝试使用一个新的index页面做所有页面的入口,将pages像组件一般引入,然后使用v-if渲染不同页面。大概模拟了一个类似于<router-view>的东西。然后不使用原生tabbar,模拟了一个在底部的组件,组件可以很简单的实现动态tabbarItem的生成。这个方法很笨,使用此方法后,因为所有页面其实是一个页面中的组件,页面生命周期例如onPullDownRefresh和onReachBottom全部失效

  3. 最后的实现

    保留原生tabbar,但是在进入有tabber页面的时候调用hideTabBar来隐藏。同时使用自己的tabbar组件,这样可以使用switchTab这个api.每个tab页面第一次进入,自定义的组件tabbar会有微小的闪烁,但是在之后的切换中不会。(因为调用了switchTab而不是redirectTo)

  4. 诉求

    我们的实现方法还远称不上优雅,例如第一次进入小程序会有原生tabbar一闪而过,再消失的视觉瑕疵;例如在第一次进入tab页面时tabbar组件会有抖动的视觉瑕疵。所以希望广大开发者能交流交流关于此类问题的实现方法。要是微信官方也能提供新的api来让我们不用workaround而是native的实现,那就更好了。


回答关注问题邀请回答
收藏

3 个回答

  • ʚ青哥ɞ
    ʚ青哥ɞ
    2019-11-04

    ii这个方法我用过,4个角色身份共6个item,牺牲了下拉刷新和上拉加载。

    2019-11-04
    赞同
    回复 2
    • 卢霄霄
      卢霄霄
      2019-11-04
      scroll-view 带效果的下拉刷新和上拉加载已经安排上咯~
      2019-11-04
      回复
    • ʚ青哥ɞ
      ʚ青哥ɞ
      2019-11-04回复卢霄霄
      已经完结了,嘿嘿。
      2019-11-04
      回复
  • 数致(上海)信息科技有限公司
    数致(上海)信息科技有限公司
    2019-11-04

    看看这个,我自己写的:https://github.com/weiyunhelong/WeChatTabbar

    略有瑕疵,请指教

    2019-11-04
    赞同
    回复
  • 卢霄霄
    卢霄霄
    2019-11-04

    生命周期函数手动去调用当前页面组件实例的方法就行了啊

    2019-11-04
    赞同
    回复 3
    • 雲上茶屋
      雲上茶屋
      2019-11-04
      对,你说的方法可行,我曾经也考虑过这么做。但是个人认为这样打乱了每个页面最基础的响应生命周期(部分)的能力,可能会在以后出现不可避免的问题,所以放弃了。
      2019-11-04
      回复
    • 卢霄霄
      卢霄霄
      2019-11-04回复雲上茶屋
      可以弄成同名方法,判断当前显示页面。。其实生命周期函数本来也就这样的,其返回值不会影响外层
      2019-11-04
      回复
    • 雲上茶屋
      雲上茶屋
      2019-11-04回复卢霄霄
      thanks,谢谢你。
      2019-11-04
      回复
登录 后发表内容
问题标签