博客 / 詳情

返回

uni-app - switchTab 跳轉到 頁面後不走onLoad,option無法更新

場景:tabbar頁面是展示一個列表,頁面中有一個搜索按鈕,點擊按鈕進入搜索頁面,輸入字段以後返回tabbar頁面展示相應的搜索結果,切換tabbar頁面後搜索條件置空

方案1:使用 navigateTo跳轉傳值

坑1:因為搜索頁要跳轉的是tabbar頁面,不能直接使用navigateTo 跳轉,只能使用switchTab,但是switchTab不支持傳參

方案2:使用reLaunch跳轉傳值

坑2:會清空路由棧,優化體驗不太好,列表頁的onshow週期接受不到傳來的值,如果在onload接收後頁面切換tabbar再回來就沒有值了

搜索頁:

uni.reLaunch({
  url:'/pages/order/index?options='+options
})

方案3:使用$emit,$on傳值

坑3:如果在列表頁的onload或者onshow接受值以後,切換tabbar再回來以後值依然存在。之前想通過onTabItemTap週期來清空,發現只能監聽本tabbar頁面回來的時候,如果需要清空需要監聽其他tabbar頁面,比較麻煩,就選擇了需要配合onhide週期置空傳參接受的data值

搜索頁:

uni.$emit('updateData', options)

uni.navigateBack({
  delta: 1
})

列表頁:

onShow(){

  uni.$on('updateData', data => {
    this.waybillNo = data.waybillNo;
    this.setOutVoucherNo = data.setOutVoucherNo;
    this.truckNo = data.truckNo;
  });

},

onHide() {
  this.waybillNo = "";
  this.setOutVoucherNo = "";
  this.truckNo = "";
}

方案4:使用uni.setStorageSync傳值

坑4:這樣的方式在於什麼時候清空傳過來的值,判斷比較多,pass

方案5:最後使用的方法

搜索頁:

let pages = getCurrentPages();
let prevPage = pages[pages.length -2]
prevPage.$vm.getValue(options)
uni.navigateBack({
  delta: 1
})

列表頁:

methods裏面加一個方法

getValue(options){
  this.waybillNo = options.waybillNo;
  this.setOutVoucherNo = options.setOutVoucherNo;
  this.truckNo = options.truckNo;
},

然後在onHide週期進行置空

onHide() {
  this.waybillNo = "";
  this.setOutVoucherNo = "";
  this.truckNo = "";
},

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.