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

最新推荐文章于 2024-11-23 11:56:13 发布

我们仰望同一片星空

最新推荐文章于 2024-11-23 11:56:13 发布

阅读量447

点赞数 6

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_49491274/article/details/136176694

版权

本文介绍了在UniApp开发中如何实现页面跳转时保持当前页面、返回上一页面刷新、以及页面间的通信方法，包括使用`uni.navigateBack`、`switchTab`和路由传参配合事件监听进行数据交换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、跳转页面不关闭当前页，与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))