快捷導航

uniapp返回上一頁執(zhí)行上一頁方法解決方案

更新時間：2023年08月22日 10:29:11 作者：BUG_Jia

這篇文章主要給大家介紹了關(guān)于uniapp返回上一頁執(zhí)行上一頁方法解決方案,在UniApp中可以通過uni.navigateBack()方法返回上一個頁面,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下

引言

在使用uniapp的過程中，我相信，我們都一定遇見過如下的場景：

進入了一個列表頁，列表頁進入詳情頁，在詳情頁進行了一些操作，比如，刪除，修改，編輯，提交，成功之后返回到列表頁，那么這個時候，如果我們的列表頁不進行數(shù)據(jù)的刷新，就會給用戶一種錯覺，我剛才進行操作的那條數(shù)據(jù)會不會沒成功，我們下拉刷新下列表，這個數(shù)據(jù)就變成最新的了，這個是很常見的一個交互場景，那么如何不讓用戶進行下拉刷新或者重新進入列表頁的操作，我提供幾種比較常用的做法！

解決方案

uniapp.小程序監(jiān)聽左上角的返回按鈕，刷新上一個頁面的數(shù)據(jù)

方法一

需要注意的一點是，需要在頁面卸載的周期內(nèi)，把自定義的事件off掉

B頁面
onUnload(){
            uni.$emit("getlist",{})//這里可以傳個空,也可以傳值過去
            uni.navigateBack({ // 返回上一頁
                delta: 1
            })
   }
A頁面
onShow(){
    uni.$on("getlist", (e)=>{
        this.getwrongtllist();//需要重新訪問一下接口。
     }) 
},
// 用這種方法需要清除，負責會一直調(diào)用多次接口
onUnload() {
    // 清除監(jiān)聽
    uni.$off('getlist');
},
// 或者有組件的使用不了小程序的生命周期可以使用  beforedestroy

方法二

B頁面
onUnload(){
         var pages = getCurrentPages(); //當前頁面棧
         if (pages.length > 1) {
           var beforePage = pages[pages.length - 2]; //獲取上一個頁面實例對象
           beforePage.data.refreshIfNeeded = true;
         }
   }
A頁面
export default {
  data() {
    return {
         refreshIfNeeded: false,
        }
  }
}
onShow() {
    var pages = getCurrentPages(); // 獲取當前頁面棧
    var currentPage = pages[pages.length - 1]; // 當前頁面
    if (currentPage.data.refreshIfNeeded) {
      currentPage.data.refreshIfNeeded = false;
      this.mescroll.resetUpScroll(); // 調(diào)用列表重置刷新頁面
      this.mescroll.scrollTo(0,0); // 滾動頁面置頂
    }
  }

方法三

B頁面 返回
payData.success = (res) => {
    uni.showToast({
        title: '支付成功',
        success: () => {
            setTimeout(() => {
                uni.navigateBack();
            }, 2000)
        }
    })
}
A頁面 返回的時候可以先清空數(shù)據(jù)，然后再請求一次接口
onShow() {
    this.orderList = []
    this.currentPage = 1
    this.gettradelist()
}