需求
部分用户登录,tabbar item个数为3,部分用户登录为4.
开发过程中遇到的问题
i.我们尝试了 wx.setTabBarItem这个api,但是这个api只能改变tabbar中每一项的文字,图标,和badge信息,无法修改tabbar中每一项的路径,更不用说动态的增减tabbaritem的数目了。
ii.我们使用的是uniapp框架,于是便尝试使用一个新的index页面做所有页面的入口,将pages像组件一般引入,然后使用v-if渲染不同页面。大概模拟了一个类似于<router-view>的东西。然后不使用原生tabbar,模拟了一个在底部的组件,组件可以很简单的实现动态tabbarItem的生成。这个方法很笨,使用此方法后,因为所有页面其实是一个页面中的组件,页面生命周期例如onPullDownRefresh和onReachBottom全部失效。
最后的实现
保留原生tabbar,但是在进入有tabber页面的时候调用hideTabBar来隐藏。同时使用自己的tabbar组件,这样可以使用switchTab这个api.每个tab页面第一次进入,自定义的组件tabbar会有微小的闪烁,但是在之后的切换中不会。(因为调用了switchTab而不是redirectTo)
诉求
我们的实现方法还远称不上优雅,例如第一次进入小程序会有原生tabbar一闪而过,再消失的视觉瑕疵;例如在第一次进入tab页面时tabbar组件会有抖动的视觉瑕疵。所以希望广大开发者能交流交流关于此类问题的实现方法。要是微信官方也能提供新的api来让我们不用workaround而是native的实现,那就更好了。
如和优雅的实现tabBar item 的动态增减?
3 回复