首页 > 其他分享 >uni-app 页面传值 tabbar切换

uni-app 页面传值 tabbar切换

时间:2023-04-22 13:36:23浏览次数:31  
标签:waybillNo app tabbar uni 页面 options truckNo

场景: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使用,不然接受的数据会一直保留

 

标签:waybillNo,app,tabbar,uni,页面,options,truckNo
From: https://www.cnblogs.com/huchong-bk/p/17342834.html

相关文章

  • 【Unity】旋转木马
    对三角函数进行实际操作,需要对木马移动进行平滑插值木马起伏采用的Cos函数的周期实现usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassMerryGoRound:MonoBehaviour{publicTransformnode;publicfloatrudis;......
  • 微信小程序:uni-app页面Page和组件Component生命周期执行的先后顺序
    目录H5微信小程序测试代码文档页面生命周期https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle组件生命周期https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle经测试,得出结论:H5和微信小程序的生命周期函数调用顺序不一致H5pagebeforeCreatepag......
  • from collections import namedtuple, MappingImportError: cannot import name 'Mapp
     fromcollectionsimportnamedtuple,MappingImportError:cannotimportname'Mapping'from'collections'(D:\python38\Lib\collections--init__.py)出现以上错误:底层报错了,重新安装python环境,重新选择新安装的环境即可解决。 ......
  • boot-admin整合flowable官方editor-app源码进行BPMN2-0建模(续)
    boot-admin整合flowable官方editor-app源码进行BPMN2-0建模(续)书接上回项目源码仓库github项目源码仓库giteeboot-admin是一款采用前后端分离模式、基于SpringCloud微服务架构的SaaS后台管理框架。系统内置基础管理、权限管理、运行管理、定义管理、代码生成器和办公管理6个功......
  • unity实现简单AR识别
    首先前往unity官网:https://unity.cn/releases,下拉找到下载UnityHub绿色按钮下载完安装进入UnityHub中,在侧边栏找到Installs,点击打开下载如图所示的unity版本(注:unity同ue,只能高版本向低版本兼容)下载过程中记得取消勾选Documentation,选择简体中文(注:很多内容需要访问外网......
  • The 1st Universal Cup. Stage 12: Ōokayama
    G容斥完之后发现要求一个m次多项式的n次方,并且得到\(n\timesm\)项。原本很sb地直接套了个多项式LnExp上去(即使知道大概率过不了),然后狂TLE。。。其实但凡从常数的角度分析,Exp的常数有14倍,已经比\(log(m)\)大了,所以不如写快速幂,然后写着就会发现卷积的长度总和其实是\((n\times......
  • Oracle RAC 更改DB_UNIQUE_NAME
    背景遇到一个场景是更改RAC架构下的OracleDB_UNIQUE_NAME,使得跟DB_NAME不一致,尝试了网上的方法,都没能成功,最后是看了官方support的solution,下面是主要操作步骤,11g203版本,已经验证是没问题的。具体操作步骤Forexample,adatabasethatwasoriginallycreatedwithGlob......
  • Unity Resources.Load
    图片路径必须是Assets\Resources目录下面的,并且不能带扩展名//E:\Assets\Resources\img\abc.jpgstringfilePath="img/abc";vartexture=Resources.Load<Texture2D>(filePath);GameObjectobj=newGameObject("newname",typeof(SpriteRenderer));Spr......
  • Appuploader安装指南
    转载:http://kxdang.com/topic/appuploader/install.html下载和安装appuploaderIOS开发工具官网地址 http://www.applicationloader.net/最新版本已经优化了没支付688给apple的账号登录流程,无需再安装其他软件。部分电脑最新版本无法启动,请下载老版本。下载最新版本下载老版......
  • Appuploader证书申请教程
    转载:http://kxdang.com/topic/appuploader/certification.htmlIOS证书制作教程点击苹果证书按钮点击新增输入证书密码,名称这个密码不是账号密码,而是一个保护证书的密码,是p12文件的密码,此密码设置后没有其他地方可以找到,忘记了只能删除证书重新制作,所以请务必记住密码。还......