微信自带的tabbar,层级最高,一旦页面需要弹窗,尤其是透明黑底的弹窗。tabbar遮盖不住
大家都习惯用自定义的tabbar组件来实现底导功能。
自定义的tabbar组件有个特点,无法使用wx.switchTab跳转。一般用wx.reLaunch或者redirectTo跳转。
我是用wx.reLaunch跳转的,但是页面跳转的时候,总是出现白屏闪一下,页面才正常显示。
如果快速的点击,在几个底导页面,不停的快速切换,会发现底导的icon图片都时隐时现。。。
就问你尴尬不尴尬
网上搜了很多文章,都说reLaunch方法是,把当前页推出页面栈,再去加载新页面,如果是这样的话,避免不了之前的页面注销了【包括当前页的tabbar栏】,那白屏的原因也就找到了。。。
看到下面这篇,决定试试,结果成功了!除了第一次进入小程序的时候,切换几个底导页面,底导栏和页面内容在显示的时候,有一点点慢,其他都没问题。后续再次快速切换底导,页面也不会闪白屏,底导icon也不会时隐时现。
主要思想就是,app.js正常引用微信小程序的原生tabbar,同时底导页面引入自定义的tabbar组件。在这几个底导页面onshow方法里,隐藏微信的tabbar栏,也就是让页面只显示自定义的tabbar组件,但是切换底导,用的跳转的方法,照样用wx.switchTab来跳转。
核心代码:
onShow: function() {
wx.hideTabBar()
}