当前位置: 首页 > news >正文

【工作实践-02】实验室移动端—跳转页面及交互

一、跳转页面不关闭当前页,与uniapp头部导航栏的返回按钮效果相似

				uni.navigateBack({delta: 1})

二、返回页面并刷新

1. 返回上一页时重新获取列表(调用上一页面获取列表方法)

                    let pages = getCurrentPages(); // 当前页面let beforePage = pages[pages.length - 2]; // 上一页uni.navigateBack({success: function () {beforePage.$vm.getRecordList();}})

2.返回上一页重新加载

uni.switchTab({url: '/pages/xxx',success(){let page = getCurrentPages().pop(); //跳转页面成功之后if (!page) return; page.onLoad(); //如果页面存在,则重新刷新页面}
});

三、跳转页面并交互

        在项目中有这样一种需求,下级页面需要上级页面传递的信息渲染,而上级页面也需要下级页面传递的信息渲染

上级页面向下级页面传递信息可以使用路由传参

而下级页面向上级页面传递信息通过以下实现

上级页面在events中通过下级页面getOpenerEventChannel()方法中emit定义的事件名 (getSelectDevice) 获取下级页面传递的数据信息

    uni.navigateTo({url: `/pages/lab/lab-choose-device?labId=${this.form.labId}&deviceIds=${this.form[str]}`,// url: `/pages/lab/lab-choose-device?deviceIds=${this.form[str]}`,events: {//获取下级页面传递回来的参数getSelectDevice: data => {let selectedDeviceIds = []let selectedDeviceNames = []JSON.parse(data).forEach(i => {selectedDeviceIds.push(JSON.parse(i).deviceId)selectedDeviceNames.push(JSON.parse(i).deviceName)})this.form[str] = selectedDeviceIds.toString()this[str + 'Name'] = selectedDeviceNames.toString()}}})

下级页面用getOpenerEventChannel() 方法定义上级页面需要通过什么方法来获取信息的方法名

this.getOpenerEventChannel().emit('getSelectDevice', JSON.stringify(this.checkedDevice))

 

http://www.lryc.cn/news/302150.html

相关文章:

  • HTTP 请求 400错误
  • C语言---指针进阶
  • QT-通信编码格式问题
  • 一文了解Web3.0真实社交先驱ERA
  • 微前端(qiankun)vue3+vite
  • 根据Ruoyi做二开
  • DockerFile的应用
  • 爬虫入门一
  • 2024-02-16 web3-区块链-keypass记录
  • 使用 JMimeMagic 在 Java 中识别文件类型
  • yolov8源码解读Detect层
  • (AtCoder Beginner Contest 341)(A - D)
  • python Flask与微信小程序 统计管理
  • 光伏企业助力乡村振兴
  • root MUSIC 算法补充说明
  • 关于Django的中间件使用说明。
  • Chapter 8 - 15. Congestion Management in TCP Storage Networks
  • 前端技巧之svg精灵图svg-sprite-loader
  • IO线程-day2
  • Spring Boot 笔记 024 登录页面
  • 09_Java集合
  • HCIA-HarmonyOS设备开发认证V2.0-3.2.轻量系统内核基础-软件定时器
  • 考研证件照可以自己用手机拍吗?考研证件照p过可以通过审核吗?考研证件照有什么要求
  • win10 环境下Python 3.8按装fastapi paddlepaddle 进行图片文字识别1
  • json字符串的处理
  • Java基础String常见的编程练习
  • 代码随想录算法训练营(回溯5)| 491.递增子序列 46.全排列 47.全排列 II
  • 专业140+总分420+南京信息工程大学811信号与系统考研经验南信大电子信息与通信工程,真题,大纲,参考书
  • 一元函数微分学【高数笔记】
  • (16)Hive——企业调优经验