前言: uniapp 是我第一次写 看了半天基本教程直接开冲 所以项目中就会遇到很多坑 (文章末尾 会说下遇到的问题)

首先说 理想效果和场景
在这里插入图片描述
1.列表点击去详情页

因为列表是用子组件渲染的 所以用getCurrentPages()来拿到当前页也就是父页面的方法或变量

不是用组件渲染的话直接使用this.你的加载列表方法

(有个小点—因为是用navigateTo 列表页数据会被缓存下来 类似vue的keepAlive,可以看到我的方法叫resetThePage(),在执行前 重置 列表页面数据例如:分页变量,列表数组等

// 在列表页 点击去详情
		toDetails(itemData) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				uni.navigateTo({
					url: `/pages/index/newStudentsReport/keyIssue/keyIssueDetails?StudentID=${itemData.admissionStudentID}&preassignedAdministrativeClassID=${itemData.preassignedAdministrativeClassID}&keyGrantStatus=${this.getItemTag.keyGrantStatus}`,
					events: {
						// workListFn 定义事件在通信页面执行
						workListFn: (data) => {
							nowPage.$vm.resetThePage();
						}
					}
				})
			}

2.触发时机

//  你的提交接口
			this._https.ajax().then(res => {
						// 提交成功后 监听到 定义的workListFn并执行 
					setTimeout(() => {
						const eventChannel = this.getOpenerEventChannel()
						// 监听workListFn事件
						eventChannel.emit('workListFn');
						// 使用navigateBack返回列表
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}).catch(err => {})

这样的话就能做到在提交后就可以刷新数据

要点: navigateTo()API中的 events对象
直接去官方看文档介绍(就是页面通讯)https://uniapp.dcloud.io/api/router?id=navigateto

以上就是处理方式

最后说下遇到的问题 我最开始就是简单使用 navigateBack 来返回列表(列表并不会刷新),后来改用redirectTo解决了列表不刷新的问题(关闭当前页面,跳转到应用内的某个页面,结果导致列表页路由历史记录在提交返回后一直添加)。

最后在问了下朋友后在uniapp文档中使用 navigateTo中的events对象来通讯页面控制刷新 解决了该问题

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐