uniapp中uni.navigateBack返回后刷新页面数据

文章目录

一、前言
- 1.1、[`uni.navigateBack`](https://uniapp.dcloud.net.cn/api/router.html#navigateback)
二、方法
- 2.1、父页面设置钩子函数`onBackPress`
- 2.2、`uni.$emit`和`uni.$on`监听通知数据变更
- - 2.2.1、子页面
  - 2.2.2、父页面
- 2.3、`onShow`钩子函数处理数据
- - 2.3.1、子页面
  - 2.3.2、父页面
- 2.4、注意
二、最后

一、前言

在移动端中，数据列表中某项数据点击编辑，进入下一个页面编辑数据，保存后回退到数据列表页，此时需要刷新列表数据，否则显示的列表数据还是旧的。这种场景感觉很多地方都有出现，是需要详细说说方法，也就是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}}
}