uniapp返回上一頁(yè)執(zhí)行上一頁(yè)方法解決方案
引言
在使用uniapp的過(guò)程中,我相信,我們都一定遇見(jiàn)過(guò)如下的場(chǎng)景:
進(jìn)入了一個(gè)列表頁(yè),列表頁(yè)進(jìn)入詳情頁(yè),在詳情頁(yè)進(jìn)行了一些操作,比如,刪除,修改,編輯,提交,成功之后返回到列表頁(yè),那么這個(gè)時(shí)候,如果我們的列表頁(yè)不進(jìn)行數(shù)據(jù)的刷新,就會(huì)給用戶一種錯(cuò)覺(jué),我剛才進(jìn)行操作的那條數(shù)據(jù)會(huì)不會(huì)沒(méi)成功,我們下拉刷新下列表,這個(gè)數(shù)據(jù)就變成最新的了,這個(gè)是很常見(jiàn)的一個(gè)交互場(chǎng)景,那么如何不讓用戶進(jìn)行下拉刷新或者重新進(jìn)入列表頁(yè)的操作,我提供幾種比較常用的做法!
解決方案
uniapp.小程序監(jiān)聽(tīng)左上角的返回按鈕,刷新上一個(gè)頁(yè)面的數(shù)據(jù)
方法一
需要注意的一點(diǎn)是,需要在頁(yè)面卸載的周期內(nèi),把自定義的事件off掉
B頁(yè)面
onUnload(){
uni.$emit("getlist",{})//這里可以傳個(gè)空,也可以傳值過(guò)去
uni.navigateBack({ // 返回上一頁(yè)
delta: 1
})
}
A頁(yè)面
onShow(){
uni.$on("getlist", (e)=>{
this.getwrongtllist();//需要重新訪問(wèn)一下接口。
})
},
// 用這種方法需要清除,負(fù)責(zé)會(huì)一直調(diào)用多次接口
onUnload() {
// 清除監(jiān)聽(tīng)
uni.$off('getlist');
},
// 或者有組件的使用不了小程序的生命周期可以使用 beforedestroy方法二
B頁(yè)面
onUnload(){
var pages = getCurrentPages(); //當(dāng)前頁(yè)面棧
if (pages.length > 1) {
var beforePage = pages[pages.length - 2]; //獲取上一個(gè)頁(yè)面實(shí)例對(duì)象
beforePage.data.refreshIfNeeded = true;
}
}
A頁(yè)面
export default {
data() {
return {
refreshIfNeeded: false,
}
}
}
onShow() {
var pages = getCurrentPages(); // 獲取當(dāng)前頁(yè)面棧
var currentPage = pages[pages.length - 1]; // 當(dāng)前頁(yè)面
if (currentPage.data.refreshIfNeeded) {
currentPage.data.refreshIfNeeded = false;
this.mescroll.resetUpScroll(); // 調(diào)用列表重置刷新頁(yè)面
this.mescroll.scrollTo(0,0); // 滾動(dòng)頁(yè)面置頂
}
}方法三
B頁(yè)面 返回
payData.success = (res) => {
uni.showToast({
title: '支付成功',
success: () => {
setTimeout(() => {
uni.navigateBack();
}, 2000)
}
})
}
A頁(yè)面 返回的時(shí)候可以先清空數(shù)據(jù),然后再請(qǐng)求一次接口
onShow() {
this.orderList = []
this.currentPage = 1
this.gettradelist()
}總結(jié)
- 第一種方法一定要在離開(kāi)頁(yè)面的時(shí)候清除掉定義的事件否則會(huì)請(qǐng)求接口多次
- 第二種方法也是比較推薦的一種
- 第三種方法是前二種都不能用的情況下使用,不是很推薦使用
到此這篇關(guān)于uniapp返回上一頁(yè)執(zhí)行上一頁(yè)方法解決方案的文章就介紹到這了,更多相關(guān)uniapp返回上一頁(yè)執(zhí)行上一頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript的instanceof運(yùn)算符學(xué)習(xí)教程
instanceof運(yùn)算符可以用來(lái)判斷某個(gè)構(gòu)造函數(shù)的prototype屬性所指向的對(duì)象是否存在于另外一個(gè)要檢測(cè)對(duì)象的原型鏈上,這里我們就來(lái)看一下JavaScript的instanceof運(yùn)算符學(xué)習(xí)教程2016-06-06
微信公眾號(hào)開(kāi)發(fā) 自定義菜單跳轉(zhuǎn)頁(yè)面并獲取用戶信息實(shí)例詳解
這篇文章主要介紹了微信公眾號(hào)開(kāi)發(fā) 自定義菜單跳轉(zhuǎn)頁(yè)面并獲取用戶信息實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-12-12
ASP小貼士/ASP Tips javascript tips可以當(dāng)桌面
今天看到《ASP小貼士/ASP Tips》 我也去把JavaScript的tips 下下來(lái)了。 看看是A4的。 自己把他改成1024 * 768 剛好可以用來(lái)做桌面2009-12-12

