uniapp 返回列表不刷新处理(列表返回优化)
前言: uniapp 是我第一次写 看了半天基本教程直接开冲 所以项目中就会遇到很多坑(文章末尾 会说下遇到的问题)首先说 理想效果和场景1.列表点击去详情页因为列表是用子组件渲染的 所以用getCurrentPages()来拿到当前页也就是父页面的方法或变量不是用组件渲染的话直接使用this.你的加载列表方法(有个小点—因为是用navigateTo 列表页数据会被缓存下来 类似vue的keepA
前言: 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对象来通讯页面控制刷新 解决了该问题
更多推荐
所有评论(0)