IT梅
IT梅
  • 发布:2019-11-27 15:10
  • 更新:2022-09-22 17:34
  • 阅读:6928

关于uni.switchTab初次跳转闪屏的解决方案

分类:uni-app

一般在使用switchTab进行页面跳转时候,第一次进入某个tabbar页面,会出现闪屏的问题,此问题产生的原因,应该是,再每次切换tabbar页面时候,uni和微信才会初始化这个tabbar页面,初始化完成后,才会缓存在页面中,初始化这个状态的时候,会造成页面加载,也就是展示出来的闪屏,许多的自定义的tabbar组件也苦于此问题,目前设想的一个解决方案,就是在应用启动状态,先去switchTab每一个tabbar页面,然后再回到首页,这样初始化就已经先做了,再次切换时候,就不会初始化了

  1. 在vuex中,声明一个全局变量,为tabbar页面是否展示完成,暂定为isOk(下文统称isOk)
  2. 在每个tabbar页面中,使用计算属性,从vuex中订阅全局的isOk变量,如果这个变量为false,则使用v-if控制dom区域不显示或者展示一个展位符
  3. 在app.onLaunch中,进行跳转所有的tabbar页面,跳转方法执行完毕后,做一个1秒市场的定时器,然后switchTab到首页,并将vuex中的isOk改为true,这样由于计算属性会根据依赖项变化而变化,所有的tabbar页面就都展示dom了,这样再次switchTab就不闪屏了

注:1. 此操作会触发每页tabbar页面的onLoad和onshow周期,需要根据isOk来合理判断每个tabbar页面针对onLoad和onShow周期执行的方法

  1. 如果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未测试,手机今天不清楚为什么无法验证证书文件

1 关注 分享
楼主

要回复文章请先登录注册

1***@qq.com

1***@qq.com

有没有大佬试试app好不好用
2022-09-22 17:34
余予娱与愚

余予娱与愚

回复 6***@qq.com :
您好,我是用 Promise then方法按顺序执行的,还是报错:等待导航到XXX,不要连续操作XXX,请问您如何解决的?
2021-07-23 09:54
6***@qq.com

6***@qq.com

太棒了,解决了我的问题,不过Promise不能用并行,要用顺序执行,否则第一个页面加载中同时去加载第二个会报错,然后欢迎页手动关闭就好了
2021-01-21 12:12
PanDQ

PanDQ

好像没起到作用
2020-11-24 13:47
9***@qq.com

9***@qq.com

对啊,不会提示么。
2020-07-26 22:18
白天的黑

白天的黑

连续多次switchTab不是会提示吗?
2020-07-04 15:35