小程序——帶參返回上一頁幾種方法
2020-09-27|HiShop
導讀:小程序 的頁面跳轉API像wx.navigateTo()、wx.redirectTo()之類的,都是跳轉到一個全新的頁面,當這個頁面是表單的時候,有時候需要跳轉到其它頁面選取信息后再跳轉回來,那之前填的信息就...
小程序的頁面跳轉API像wx.navigateTo()、wx.redirectTo()之類的,都是跳轉到一個全新的頁面,當這個頁面是表單的時候,有時候需要跳轉到其它頁面選取信息后再跳轉回來,那之前填的信息就必須得存在,這個時候可以當跳轉到選擇信息的頁面,選中信息后設置設置上一頁的data,然后再返回到上一頁,這樣數據都會存在。
方法一
把當前頁面數據放入本地緩存( wx.setStorage(wx.setStorageSync),上一個頁面再從緩存中取出(wx.getStorage(wx.getStorageSync))同時退出登錄時要清除緩存(wx.clearStorage(wx.clearStorageSync))。
方法二
- 在當前頁設置上一頁的data,例如
- var pages = getCurrentPages(); // 獲取頁面棧
- var currPage = pages[pages.length - 1]; // 當前頁面
- var prevPage = pages[pages.length - 2]; // 上一個頁面
- prevPage.setData({
- mydata: {a:1, b:2} // 假數據
- })
當然這個“mydata”必須是上一頁有的數據才行
返回上一頁的數據為:
- wx.navigateBack({
- delta: 1
- })
2、直接調用方法名來更新數據 頁面A
- Page({
- data: {
- name: ''
- },
- ...
- ,
- //更新name
- changeData: function(name){
- this.setData({
- name: name
- })
- }
- })
頁面B,假設有一個文本框用于輸入姓名,點擊返回按鈕后更新頁面A的name
- Page({
- //此方法用于文本框輸入回調
- inputTyping: function (e) {
- //獲取頁面棧
- var pages = getCurrentPages();
- if(pages.length > 1){
- //上一個頁面實例對象
- var prePage = pages[pages.length - 2];
- //關鍵在這里
- prePage.changeData(e.detail.value)
- }
- }
- })
這樣就可以實現數據傳遞給上一個頁面,要注意頁面A必須使用wx.navigateTo跳轉到頁面B,不能使用wx.redirectTo,這樣會關閉上一個頁面,導致頁面B無法獲取上一頁Page實例。
方法三 在app.js中設置全局變量,當前頁賦值,上一頁取之
方法為
- globalData: {
- userInfo: null,
- }
注意:方法一,方法三,都需要重新刷新頁面數據所走方法為:
- /**
- * 生命周期函數--監聽頁面顯示
- */
- onShow: function () {
- },
您可能感興趣:小程序開發