uniapp 新增/编辑后返回列表提示刷新
uniapp (Vue2/Vue3),新增编辑页,操作成功后,返回刷新列表
·
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('新增成功返回');
});
}
});
};
更多推荐
已为社区贡献3条内容
所有评论(0)