本文详解在uniapp开发中，从子页面编辑返回父页面时刷新列表数据的多种实现方式。重点介绍onBackPress钩子、uni.$emit事件总线、onShow生命周期判断以及$forceUpdate强制更新等技巧，帮助开发者解决返回后数据未实时更新的常见问题。
一、前言
在移动端应用中，常见的交互场景是：用户在数据列表页点击某项进入编辑页，修改并保存后返回原列表页。此时若列表数据未刷新，用户看到的仍是旧数据，影响体验。针对uniapp框架中uni.navigateBack返回后如何刷新页面数据的问题，本文将详细探讨几种可行的解决方案。
1.1、uni.navigateBack
二、方法
2.1、父页面设置钩子函数onBackPress
详细文档可点击【跳转】，适用于刷新多处数据
export default {
onBackPress(options) {
this.refreshData();
},
methods:{
refreshData: function() {
//加载数据
}
}
}
2.2、uni.$emit和uni.$on监听通知数据变更
2.2.1、子页面
子页面在需要返回上一页面的地方写入uni.navigateBack，然后在success回调中uni.$emit发送数据更新通知
uni.navigateBack({
delta: 1, // 返回层数，2则上上页
success() {
uni.$emit('update',{msg:'页面更新'})
}
})
2.2.2、父页面
父页面在初始化阶段使用uni.$on监听数据更新事件，在回调函数中执行数据重新加载逻辑。同时，为了优化性能并避免内存泄漏，应在页面销毁时移除该监听器。
export default {
mounted() {
uni.$on('update', function(data) {
//触发更新后
})
},
//为了优化代码，可以加上移除事件，避免重复监听事件
onUnload() {
// 移除监听事件
uni.$off('update');
}
}
2.3、onShow钩子函数处理数据
2.3.1、子页面
在准备回退到上一页之前，先获取上一个页面实例，并将表示是否刷新的参数值设置为真（或1）。
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; // 上一个页面
// 直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
isRefresh: 1
})
// 再根据需求，确定返回上一页面
uni.navigateBack({
delta: 1
})
2.3.2、父页面
在父页面的onShow生命周期钩子中，获取判断条件（即刷新标志），若为真则重新获取数据，随后重置该标志。
export default{
data() {
return{
isRefresh:false
}
},
onShow() {
// 如果是提交状态返回isRefresh=1，才刷新页面，从详情过来无需刷新
let pages = getCurrentPages();
let currPage = pages[pages.length - 1];
if(currPage.__data__.isRefresh) {
// 重新获取数据
this.getData(true)//获取列表数据
// 每一次需要清除，否则会参数会缓存
currPage.__data__.isRefresh=false
}
}
}
2.4、注意
如果出现数据没有更新的情况，可以尝试使用$forceUpdate强制更新视图，或者先置空数据再重新赋值，这通常是因为数据响应式系统未能自动检测到深层变化。
最后
到此这篇关于uniapp中uni.navigateBack返回后刷新页面数据的实现的文章就介绍到这了,更多相关uniapp uni.navigateBack返回刷新内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！