【工作实践-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))