在使用uniapp的过程中,我相信,我们都一定遇见过如下的场景:
进入了一个列表页,列表页进入详情页,在详情页进行了一些操作,比如,删除,修改,编辑,提交,成功之后返回到列表页,那么这个时候,如果我们的列表页不进行数据的刷新,就会给用户一种错觉,我刚才进行操作的那条数据会不会没成功,我们下拉刷新下列表,这个数据就变成最新的了,这个是很常见的一个交互场景,那么如何不让用户进行下拉刷新或者重新进入列表页的操作,我提供几种比较常用的做法!
uniapp.小程序监听左上角的返回按钮,刷新上一个页面的数据
需要注意的一点是,需要在页面卸载的周期内,把自定义的事件off掉
B页面 onUnload(){ uni.$emit("getlist",{})//这里可以传个空,也可以传值过去 uni.navigateBack({ // 返回上一页 delta: 1 }) } A页面 onShow(){ uni.$on("getlist", (e)=>{ this.getwrongtllist();//需要重新访问一下接口。 }) }, // 用这种方法需要清除,负责会一直调用多次接口 onUnload() { // 清除监听 uni.$off('getlist'); }, // 或者有组件的使用不了小程序的生命周期可以使用 beforedestroy
B页面 onUnload(){ var pages = getCurrentPages(); //当前页面栈 if (pages.length > 1) { var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象 beforePage.data.refreshIfNeeded = true; } } A页面 export default { data() { return { refreshIfNeeded: false, } } } onShow() { var pages = getCurrentPages(); // 获取当前页面栈 var currentPage = pages[pages.length - 1]; // 当前页面 if (currentPage.data.refreshIfNeeded) { currentPage.data.refreshIfNeeded = false; this.mescroll.resetUpScroll(); // 调用列表重置刷新页面 this.mescroll.scrollTo(null,0); // 滚动页面置顶 } }
B页面 返回 payData.success = (res) => { uni.showToast({ title: '支付成功', success: () => { setTimeout(() => { uni.navigateBack(); }, 2000) } }) } A页面 返回的时候可以先清空数据,然后再请求一次接口 onShow() { this.orderList = [] this.currentPage = 1 this.gettradelist() }
到此这篇关于uniapp返回上一页执行上一页方法解决方案的文章就介绍到这了,更多相关uniapp返回上一页执行上一页内容请搜索插件窝以前的文章或继续浏览下面的相关文章希望大家以后多多支持插件窝!