网站首页 全球最实用的IT互联网站!

人工智能P2P分享Wind搜索发布信息网站地图标签大全

当前位置:诺佳网 > 软件工程 > 前端开发 > JavaScript >

uni-app - switchTab 跳转到 页面后不走onLoad,option无法

时间:2025-11-29 02:24

人气:

作者:admin

标签:

导读:场景:tabbar页面是展示一个列表,页面中有一个搜索按钮,点击按钮进入搜索页面,输入字段以后返回tabbar页面展示相应的搜索结果,切换tabbar页面后搜索条件置空 方案1:使用 navigat...

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

温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!
相关阅读
本类排行
相关标签
本类推荐

CPU | 内存 | 硬盘 | 显卡 | 显示器 | 主板 | 电源 | 键鼠 | 网站地图

Copyright © 2025-2035 诺佳网 版权所有 备案号:赣ICP备2025066733号
本站资料均来源互联网收集整理,作品版权归作者所有,如果侵犯了您的版权,请跟我们联系。

关注微信