一般在使用switchTab进行页面跳转时候,第一次进入某个tabbar页面,会出现闪屏的问题,此问题产生的原因,应该是,再每次切换tabbar页面时候,uni和微信才会初始化这个tabbar页面,初始化完成后,才会缓存在页面中,初始化这个状态的时候,会造成页面加载,也就是展示出来的闪屏,许多的自定义的tabbar组件也苦于此问题,目前设想的一个解决方案,就是在应用启动状态,先去switchTab每一个tabbar页面,然后再回到首页,这样初始化就已经先做了,再次切换时候,就不会初始化了
- 在vuex中,声明一个全局变量,为tabbar页面是否展示完成,暂定为isOk(下文统称isOk)
- 在每个tabbar页面中,使用计算属性,从vuex中订阅全局的isOk变量,如果这个变量为false,则使用v-if控制dom区域不显示或者展示一个展位符
- 在app.onLaunch中,进行跳转所有的tabbar页面,跳转方法执行完毕后,做一个1秒市场的定时器,然后switchTab到首页,并将vuex中的isOk改为true,这样由于计算属性会根据依赖项变化而变化,所有的tabbar页面就都展示dom了,这样再次switchTab就不闪屏了
注:1. 此操作会触发每页tabbar页面的onLoad和onshow周期,需要根据isOk来合理判断每个tabbar页面针对onLoad和onShow周期执行的方法
- 如果dom中控制了tabbar组件,会造成tabbar组件的计算属性失效,解决方法,由页面分别传入当前页面路径或者激活的index来显示激活状态
Promise.all([new Promise((resolve)=>{
uni.switchTab({
url:"tabbar页面1",
})
resolve()
}),new Promise((resolve)=>{
uni.switchTab({
url:"tabbar页面2",
})
resolve()
}),new Promise((resolve)=>{
uni.switchTab({
url:"tabbar页面3",
})
resolve()
})]).then(()=>{
setTimeout(()=>{
uni.switchTab({
url:"首页",
})
},1000)
})
目前测试是在h5与微信小程序中生效,支付宝小程序与5+app未测试,手机今天不清楚为什么无法验证证书文件
11 个评论
要回复文章请先登录或注册
南黎2024
刘翠
t***@gmail.com
1***@qq.com
邓健
1***@qq.com
余予娱与愚
6***@qq.com
PanDQ
9***@qq.com