uniapp的局部刷新（页面返回刷新)

Ciwei蓝

已于 2022-03-29 09:05:39 修改

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： 2022uniapp学习笔记文章标签：前端 vue.js uni-app

于 2022-03-28 18:55:54 首次发布

本文链接：https://blog.csdn.net/Blue54/article/details/123802548

2022uniapp学习笔记专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种在页面跳转并更新数据后，如何实现在返回前页面时刷新指定列表项的方法。具体实现包括在返回操作中通过自定义事件传递更新数据，并在目标页面上使用map或forEach遍历数据源来更新对应项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：当前页面1的某个item列表项点击后跳转到页面2，在页面2作数据更新后，点击返回页面到页面1，页面1刷新当前item项的数据。

解决办法：

页面2中：返回的事件里传递刷新的值：uni.$emit

在返回事件传递所需要的值updatali给updatatotal，

goBack() {
				
					uni.reLaunch({
						url: '/home/index'
					});

				uni.$emit('updatatotal',this.updatali)
			}

在页面1：通过uni.$on作接收处理

因为是数组对象：所以处理用如下

并通过if判断是否拿到data和data的id，如果拿到那么遍历页面1用来渲染页面的数组数据，再一次通过if判断过滤所遍历的数组，使item的值为只剩下：做过更新数据的页面2的数据id的那个item项。然后把值赋值上去。

通过map遍历数组方法：

mounted() {
			uni.$on('updatatotal', (data) => {
				if (data && data.id) {
					this.dataSource = this.dataSource.map(item => {
						if (item.id === data.id) {
							return {
								...item,
								opusNum: data.opusNum,
								up: data.up,
								play: data.play
							}
						} else {
							return item
						}
					})
				}
			})
			
		},

接收也可以通过下面的方式接收：foreach

uni.$on('refreshSelectData', data => { //单条记录的刷新
				if (data && data.id) {
					this.dataSource.forEach(item => {
						if (item.id === data.id) {
							item.applyNum = data.applyNum
						}
					})
				}
			})

*map遍历数组：

//在console控制台打印
oldArray = [{key:'0',value:'同意'},{key:'1',value:'取消'}];
 
newArray = oldArray.map(item => {
    return item.value;
});
 
// 输出结果为：["同意","取消"]