uniapp 本页自动检测下页是否有数据更新。更新则重新加载本页面的某个数据请求函数,不更新就不生效

前言

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();
		});
	},

我这里是配合滚动到底部自动自动加载下一页数据使用的,感兴趣的可以看我的这一篇文章

uniapp,小程序滚动到底部自动加载下一页

相关推荐
草莓熊Lotso14 小时前
Linux 进阶指令实操指南:文件查看、时间管理、搜索压缩全场景覆盖(附高频案例)
linux·运维·服务器
Cx330❀14 小时前
《Linux进阶指令实操指南》:文件查看、时间管理、搜索压缩全覆盖(附高频案例)
linux·运维·服务器
风清云淡_A14 小时前
【uniapp】uni.uploadFile上传数据多出一个304的get请求处理方法
uni-app
shykevin14 小时前
uni-app x商城,商品列表组件封装以及使用
windows·uni-app
cesske14 小时前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
努力努力再努力wz14 小时前
【C++进阶系列】:万字详解unordered_set和unordered_map,带你手搓一个哈希表!(附模拟实现unordered_set和unordered_map的源码)
java·linux·开发语言·数据结构·数据库·c++·散列表
Small___ming14 小时前
【Linux基础学习】Linux Ubuntu 权限管理:从入门到精通
linux·学习·ubuntu
喵叔哟14 小时前
63.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--新增功能--预算告警
运维·微服务·.net
tan77º14 小时前
【项目】基于多设计模式下的同步&异步日志系统 - 项目介绍与前置知识
linux·c++·设计模式
Akshsjsjenjd15 小时前
Docker资源限制详解
运维·docker·容器