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