uniapp Vue2

在新增编辑页,新增/编辑成功后,通过getCurrentPages()获取上一页(列表页)实例,调取上一页方法刷新列表。

//新增编辑页

	let pages = getCurrentPages(); 
	let prePage = pages[pages.length - 2]; // 最后一个元素为当前页面,获取上一页即列表页
	prePage.$vm.getList(); //调用上一页方法getList()
    uni.navigateBack();//返回


//列表页
    methods:{
        getList() {
            //...
        }
    }

uniapp Vue3

 通过页面栈调用上一页的方法不管用,使用页面间通讯方式进行监听,来判断更新列表。

//新增编辑页

uni.$emit('testUpdate', { msg: '页面更新' });//触发事件,对应的列表页会监听到
uni.navigateBack();




//列表页

//获取列表
const getList = () => {
	//...
};

//跳转新增编辑页,跳转时通过uni.$once开始监听
const goAdd = () => {
	uni.navigateTo({
		url: './add',
		success: () => {
			uni.$once('testUpdate', data => {
				getList();//监听到uni.$emit 触发事件,调用获取列表方法
				console.log('新增成功返回');
			});
		}
	});
};

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐