uniapp返回上一页并实现刷新界面数据的完整代码
作者：卸载引擎
从一个列表界面点击新增按钮,进入新增元素的界面,然后新增之后返回列表界面,并刷新列表界面,下面小编给大家分享uniapp返回上一页,并实现刷新界面数据的代码,感兴趣的朋友跟随小编一起看看吧
在uniapp中，经常会有返回上一页的情况，官方提供有 uni.navigateBack 这个api来实现效果，但是此方法返回到上一页之后页面并不会自动刷新（不会触发上一页的onLoad()方法）。
使用场景
从一个列表界面点击新增按钮，进入新增元素的界面，然后新增之后返回列表界面，并刷新列表界面。
效果实现
元素新增界面的代码：
if (res.code === 200) {
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2]; // 上一个页面
uni.$u.toast('操作成功');
setTimeout(() => {
uni.navigateBack({
delta: 1,
success: () => {
prevPage.$vm.getList(); // 直接调用上个页面的刷新方法
}
});
}, 1000);
} else {
uni.$u.toast(res.msg);
}列表界面的代码
async onLoad() {
await this.getList(); // 自定义的刷新函数
},利用获取页面栈 getCurrentPages() 方法， 在使用uni.navigateBack()返回成功后调用 beforepage.$vm.需刷新方法 即可完成返回并刷新。
到此这篇关于uniapp返回上一页，并实现刷新界面数据的文章就介绍到这了,更多相关uniapp刷新数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！