中国和城乡建设部网站,网站增加聊天,怎么做旅店网站,山东网站建设最便宜文章目录 一、前言1.1、[uni.navigateBack](https://uniapp.dcloud.net.cn/api/router.html#navigateback) 二、方法2.1、父页面设置钩子函数onBackPress2.2、uni.$emit和uni.$on监听通知数据变更2.2.1、子页面2.2.2、父页面 2.3、onShow钩子函数处理数据2.3.1、子页面2.3.2、父… 文章目录 一、前言1.1、[uni.navigateBack](https://uniapp.dcloud.net.cn/api/router.html#navigateback) 二、方法2.1、父页面设置钩子函数onBackPress2.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() { // 如果是提交状态返回isRefresh1才刷新页面从详情过来无需刷新let pages getCurrentPages();let currPage pages[pages.length - 1];if(currPage.__data__.isRefresh) {// 重新获取数据this.getData(true)//获取列表数据// 每一次需要清除否则会参数会缓存currPage.__data__.isRefreshfalse}}
}2.4、注意
如果出现数据没有更新可以使用$forceUpdate或者先置空数据再赋值数据大概率是数据没有响应
二、最后
本人每篇文章都是一字一句码出来希望大佬们多提提意见。顺手来个三连击点赞收藏关注✨。创作不易给我打打气加加油☕
