nvue页面刷新父vue页面,添加修改完成后刷新列表的功能

修改数据后列表页自动刷新

应用中有一个nvue页面,需要添加调用父页面(vue)的下拉刷新操作的需求。
及在操作页面有数据的添加修改操作后,返回到列表页面时,列表的数据应该刷新。
实现这个功能的方法有很多种方法,但是最简单的肯定就是直接触发列表的刷新方法了。

正常逻辑触发失败

方法流程:

  1. 在列表页中监听refresh事件,在该事件中行下拉刷新操作。
  2. 在操作页的返回事件中增加触发列表页刷新的refresh事件。

尝试使用官方文档中的相关方法:nvue 和 vue 相互通讯

监听刷新事件

onLoad(e) {
    
    
	//添加监听事件
	uni.$on('refresh', function(data) {
    
    
		console.log(JSON.stringify(data)); //正常打印日志
		uni.startPullDownRefresh(); //无法正常刷新
	});
},
onUnload() {
    
    
	uni.$off('refresh');// 移除监听事件
}

触发刷新事件

//触发refresh事件
uni.$emit('refresh', {
    
    
		msg: '刷新列表数据'
	});

经过测试,发现返回列表时页面没有自动刷新。

问题查找处理

通过日志打印,发现有触发刷新方法调用,但是没有实际的刷新操作。
考虑应该是返回父页面时,该页面还未完成显示过程,无法执行下拉刷新。

优化流程:

  1. 在列表页中监听refresh事件,在该事件中修改_refresh状态。
  2. 在列表页面显示事件中通过_refresh状态判断是否调用下拉刷新。
  3. 在操作页的返回事件中增加触发列表页刷新的refresh事件。

遂更新列表页面代码:

	var _refresh=false;//
	onLoad() {
    
    
		//添加监听事件
		uni.$on('refresh', data => {
    
    
			_refresh=true;
		});
	},
	onUnload() {
    
    
		uni.$off('refresh');// 移除监听事件
	},
	onShow(){
    
    
		if(_refresh){
    
    
			uni.startPullDownRefresh(); //刷新
			_refresh=false;
		}
	}

运行,正常触发刷新,问题解决

猜你喜欢

转载自blog.csdn.net/u011513460/article/details/106192655