對于上述問題,WePY 中封裝了兩種概念去解決:
擴(kuò)展了生命周期,添加了onPrefetch事件,會在 redirect 之時被主動調(diào)用。同時給onLoad事件添加了一個參數(shù),用于接收預(yù)加載或者是預(yù)查詢的數(shù)據(jù):
// params
// data.from: 來源頁面,page1
// data.prefetch: 預(yù)查詢數(shù)據(jù)
// data.preload: 預(yù)加載數(shù)據(jù)
onLoad (params, data) {}
預(yù)加載數(shù)據(jù)示例:
// page1.wpy 預(yù)先加載 page2 需要的數(shù)據(jù)。
methods: {
tap () {
this.$redirect('./page2');
}
},
onLoad () {
setTimeout(() => {
this.$preload('list', api.getBigList())
}, 3000)
}
// page2.wpy 直接從參數(shù)中拿到 page1 中預(yù)先加載的數(shù)據(jù)
onLoad (params, data) {
data.preload.list.then((list) => render(list));
}
預(yù)查詢數(shù)據(jù)示例:
// page1.wpy 使用封裝的 redirect 方法跳轉(zhuǎn)時,會調(diào)用 page2 的 onPrefetch 方法
methods: {
tap () {
this.$redirect('./page2');
}
}
// page2.wpy 直接從參數(shù)中拿到 onPrefetch 中返回的數(shù)據(jù)
onPrefetch () {
return api.getBigList();
}
onLoad (params, data) {
data.prefetch.then((list) => render(list));
}
更多建議: