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刷新数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
innerHTML,outerHTML,innerText,outerText的用法及区别解析
本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助2013-12-12JavaScript 中使用Promise.all()方法经验技巧详解
这篇文章主要为大家介绍了JavaScript 中使用Promise.all()方法经验技巧详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
最新评论