微信小程式返回上一頁的各種方法範例

2022-06-20 14:00:05

一、方法羅列

函數	說明
navigator	保留當前頁面,在wxml使用
wx.navigateTo	保留當前頁面,在js使用
wx.redirectTo	不保留當前頁面,在js使用
wx.switchTab	不保留當前頁面,跳轉到tabBar頁

二、講解

1️⃣ navigate

<navigator  url=".路徑">
    其它
</navigator>

2️⃣wx.navigateTo

wx.navigateTo({
       url: '路徑',
 })

3️⃣wx.redirectT

wx.redirectTo({
    url: '路徑',
})

4️⃣wx.switchTab

wx.switchTab({
    url: '路徑',
})

三、常用案例

navigateBack 省去寫路徑

  wx.navigateBack({
    delta: 1
  });

reLaunch 關閉所有頁面，開啟到應用內的某個頁面

  wx.reLaunch({ 
    url: '/pages/index/index',
  })

四、總結

返回頁面各有優點，按照自己需求使用。

補充：微信小程式如何返回上一個頁面並重新整理上一個頁面

由於專案中經常碰到建立、刪除後返回列表的場景，因此需要在返回後，頁面及時反饋出操作後的結果列表，而不是舊資料列表

如何獲取當前頁面棧

var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];
var currentPage = pages[pages.length - 1];

然後你就可以通過物件直接操作當前頁面，比如呼叫函數。

建立

一般建立後，需要跳轉到詳情頁面，然後詳情頁面返回又是列表頁，這裡舉例說明如何返回列表頁時有新建立的專案

var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];
// 呼叫列表頁的獲取資料函數
beforePage.loadData();
// 跳轉
wx.redirectTo({
    url: '/pages/info/info',
});

這裡的跳轉使用了 redirectTo，會關閉當前頁面，所以我們在info頁面點左上角返回時，會直接返回到列表頁

建議在列表頁的onLoad函數中，將資料請求單獨放在一個函數中進行呼叫，比如這裡的loadData，這樣在create頁面就能只重新整理資料，而onLoad中可能存在的，比如獲取使用者id等操作，則不會重複再次執行

刪除

var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];
beforePage.loadData();
wx.navigateBack({
    delta: 1,
})

這裡需要使用navigateBack返回上一級頁面

總結

到此這篇關於微信小程式返回上一頁的文章就介紹到這了,更多相關微信小程式返回上一頁內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！