1***@qq.com
1***@qq.com
  • 发布:2023-09-27 22:07
  • 更新:2023-09-27 22:07
  • 阅读:687

switchTab首次加载时,tabbar切换闪屏问题解决

分类:uni-app

解决思路

在应用首次加载时,依次调用switchTab预加载dom

1、在App.vue的onLaunch中加入跳转页面

注意:首页放最后


onLaunch: async function() {  

            const pages = ['页面1', '页面2', '页面3','首页'];    
            for (let i = 0; i < pages.length; i++) {    
                try {    
                    await new Promise((resolve, reject) => {  
                       uni.switchTab({    
                         url: pages[i],    
                         success: () => {    
                           resolve();    
                         },    
                         fail: () => {    
                           reject();    
                         }    
                       });  
                     });  
                } catch (error) {    
                  console.error('Failed to switch tabbar page:', pages[i]);    
                }  
                if(i===pages.length-1){  
                    this.$store.commit('setIsOkSwichTab',true)  
                }  
            }   
        },

2、在每个页面通过store的全局变量判断是否显示

用v-show判断为true时才显示,这样做是为了更快的进入首页,switchTab时,在onLoad尽量少做耗时操作

App实测可行,如果有更好的方案可以分享分享,其实看了还有些解决方案
1、共用同一个tabbar主页,通过v-if来控制各个页面,会有回到顶部的问题,每次切换都会回到顶部,用v-show的话卡,多个页面公用一个容器,除非再引入组件来控制高度
2、通过uni-simple-router,动态路由控制,感觉相对麻烦点,不过效果应该会好点,类似vue的router-view显示了,没用过
3、依次通过switchTab加载tabBar,这样就想自动帮用户都点了一下tabbar了,会延长APP应用启动时间
4、uni.preloadPage,预加载页面,我用的时候就是H5端可以,到实体机APP就不行了,可能版本问题
5、还有一种是,类似微信那样,直接四个页面都展示,还可以左右滑动,用swiper-item来做,类似轮播图,就是四个页面都展示了,问题就是加载东西多会卡卡卡

大概能找到的和想到的就这些了,坑坑坑啊

0 关注 分享

要回复文章请先登录注册