h5+app項目中遇到切換頁面白屏問題的解決方案

總結就是使用預加載的方案 ,本篇僅作記錄學習。

因為公司項目代碼中用到了mui , 可以使用 mui 的 預加載

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口參數(shù)
      extras:{},//自定義擴展參數(shù)
      subpages:[{},{}]//預加載頁面的子頁面
    }
  ],
  preloadLimit:5//預加載窗口數(shù)量限制(一旦超出,先進先出)默認不限制
});

在創(chuàng)建新頁面跳轉時,可以加上show參數(shù),event指定為loaded:

mui.openWindow({
    url: url,
    show:{
        event:"loaded"http://在當前頁面加載,加載完在跳轉
        },
    waiting: {
        autoShow: true, //自動顯示等待框,默認為true
        title: '加載中...'
        }
});

如果使用的是plus.webview:

    var sub = plus.webview.create(url, id, params);
    // 新增加載監(jiān)聽 等頁面加載完畢后顯示,防止出現(xiàn)切換頁面白屏
    sub.addEventListener('loaded',function(){
         sub.show();
    },false);
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容