如和优雅的实现tabBar item 的动态增减?
发布于 6 年前 作者 gangzhong 10436 次浏览 来自 官方Issues
  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 回复

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

略有瑕疵,请指教

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

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

回到顶部