前言
uniapp中部分页面的下一页有的数据变化联动着本页的数据,下一页更新数据,返回时本页数据也需要更新,要是用onShow 的话有点频繁刷新页面,每次返回都会重新加载本页面,重新请求数据,对用户来说体验感太差了,每次都刷新页面,所以本次来的就是解决这个问题
实现
我们用uni. e m i t 和 u n i . emit 和 uni. emit和uni.on 来实现
uni. e m i t 和 u n i . emit 和 uni. emit和uni.on是成对使用的,括号内容部分两个一样才能检测你用的哪一个
1.1 uni.$emit的使用方式
这里是你修改信息成功之后的逻辑,加到这里,
这里就是返回你返回上一页之后uni. o n 会检测有没有 u n i . on会检测有没有uni. on会检测有没有uni.emit,写在成功之后执行,当uni. o n 检测到有 u n i . on检测到有uni. on检测到有uni.emit,就会执行内部逻辑,重新请求我i们的数据
javascript
if (res.data.code == 0) {
uni.$emit('callreload');
uni.showToast({
title: '提交成功',
icon: 'success'
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000);
} else {
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000
})
}
1.2 uni.$on的使用方式
我的reload函数就是请求数据的函数,首次加载reload函数,若是uni. o n 检测到有 u n i . on检测到 有 uni. on检测到有uni.emit,就会执行 uni. o n ,重新请求函数,没有则不执行, u n i . on,重新请求函数,没有则不执行,uni. on,重新请求函数,没有则不执行,uni.on是用在uni. e m i t 返回的上一个页面中使用, u n i . emit返回的上一个页面中使用,uni. emit返回的上一个页面中使用,uni.on和uni.$emit不是在一个页面中使用,是两个页面,使用的时候注意,
javascript
onLoad() {
this.reload();
uni.$on('callreload', () => {
this.reload();
});
},
我这里是配合滚动到底部自动自动加载下一页数据使用的,感兴趣的可以看我的这一篇文章