一、前言
在移动端中,数据列表中某项数据点击编辑,进入下一个页面编辑数据,保存后回退到数据列表页,此时需要刷新列表数据,否则显示的列表数据还是旧的。这种场景感觉很多地方都有出现,是需要详细说说方法,也就是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、子页面
准备回退到上一页之前,将上一页的是否刷新参数值改为是的状态
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
或者先置空数据再赋值数据,大概率是数据没有响应
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版
2023-07-18 jpa HQL查询视图与在数据库中sql查询结果不一致的原因及解决方法记录
2016-07-18 C#:调用webservice时提示对操作的回复消息正文进行反序列化时出错