您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么優(yōu)化mui列表跳轉(zhuǎn)到詳情頁”,在日常操作中,相信很多人在怎么優(yōu)化mui列表跳轉(zhuǎn)到詳情頁問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”怎么優(yōu)化mui列表跳轉(zhuǎn)到詳情頁”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
實施方法
通過預(yù)加載提前加載詳情頁;
mui.fire觸發(fā)詳情頁面指定事件,調(diào)用ajax更新數(shù)據(jù);
一、預(yù)加載的實現(xiàn)(兩種方法):
官方地址
預(yù)加載方法一:
通過mui.init方法中的preloadPages參數(shù)進行配置。
mui.init({
preloadPages:[
{
url:prelaod-page-url,id:preload-page-id,
styles:{},//窗口參數(shù)
extras:{},//自定義擴展參數(shù)
subpages:[{},{}]//預(yù)加載頁面的子頁面
}
],
preloadLimit:5//預(yù)加載窗口數(shù)量限制(一旦超出,先進先出)默認(rèn)不限制});
在使用中,可能用不到那么多的屬性,下面是我的使用案例:
mui.init({preloadPages:[{
url:'account_detail.html',
id:'account_detail.html'
}]
});
只需要設(shè)置url和id就可以,詳情頁需要的參數(shù)在使用mui.fire的時候傳過去;
預(yù)加載方法二:
通過mui.preload方法預(yù)加載。
varpage=mui.preload({url:new-page-url,id:new-page-id,//默認(rèn)使用當(dāng)前頁面的url作為id
styles:{},//窗口參數(shù)
extras:{}//自定義擴展參數(shù)});
預(yù)加載兩種方法對比:
1.方法一為異步創(chuàng)建預(yù)加載頁面,并且可以同時創(chuàng)建多個頁面,但是由于是異步的,因此不能立即獲取到創(chuàng)建的webview對象,并且需要使用plus.webview.getWebviewById來獲取到創(chuàng)建的webview;
2.方法二為同步創(chuàng)建預(yù)加載頁面,可以在創(chuàng)建后同步獲取到webview,即方法二的“page”變量;但是方法二只能同時創(chuàng)建一個預(yù)加載的頁面;
二、通過mui.fire觸發(fā)自定義事件
原理:兩個同時存在的webview之間可以通過mui.fire方法來觸發(fā)另一個webview中的自定義事件,因此,我們可以在詳情頁中創(chuàng)建一個自定義事件,監(jiān)聽列表頁中的mui.fire方法。
mui.fire(target,event,data)
target:詳情頁(列表頁中預(yù)加載的詳情頁)的webview;
event:詳情頁中監(jiān)聽的自定義事件;
data:需要傳給詳情頁的參數(shù);
1.在詳情頁創(chuàng)建并監(jiān)聽自定義事件“account_bid_detail_fire”:
$.plusReady(function(){/**
*實例化獲取接口數(shù)據(jù)方法
*/
varget_bid_detail=newGET_BID_DETAIL();window.addEventListener('account_bid_detail_fire',function(event){//獲得事件參數(shù)
varid=event.detail.id;console.log(JSON.stringify(event.detail));//觸發(fā)ajax,根據(jù)id向服務(wù)器請求當(dāng)前列表詳情
get_bid_detail.init(id);
});
});
mui.fire從列表頁傳的參數(shù)都在event.detail中,可以輸出具體查看;
2.在列表頁觸發(fā)“account_bid_detail_fire”事件:
mui(document.body).on("tap",".account_bid_list",function(){//觸發(fā)詳情頁面的account_bid_detail_fire事件
vardetail_webview=null;if(!detail_webview){//判斷webview是否存在
detail_webview=plus.webview.getWebviewById("account_detail.html");
}//detail_webview是在列表頁中預(yù)加載的頁面;
mui.fire(detail_webview,'account_bid_detail_fire',{id:_this.dataset.id
});//打開詳情頁面
mui.openWindow({id:"account_detail.html",//詳情頁webview的id
show:{aniShow:'none',//頁面不顯示動畫
duration:'0'//
}
});
});
接下來,在列表頁點擊列表的時候就可觸發(fā)詳情頁的“account_bid_detail_fire”事件,然后觸發(fā)詳情頁的ajax來更新請求的數(shù)據(jù)
到此,關(guān)于“怎么優(yōu)化mui列表跳轉(zhuǎn)到詳情頁”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。