uni-app 页面传值 tabbar切换

场景：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 = "";
},

 

ps:

1.tabbar切换能监听的周期只要onhide，destoryed和onunload什么都没有执行

2.一定要搭配onhide使用，不然接受的数据会一直保留