uniapp返回上一页执行上一页方法解决方案
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
引言
在使用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(0,0); // 滚动页面置顶 } }
方法三
B页面 返回 payData.success = (res) => { uni.showToast({ title: '支付成功', success: () => { setTimeout(() => { uni.navigateBack(); }, 2000) } }) } A页面 返回的时候可以先清空数据,然后再请求一次接口 onShow() { this.orderList = [] this.currentPage = 1 this.gettradelist() }
总结
- 第一种方法一定要在离开页面的时候清除掉定义的事件否则会请求接口多次
- 第二种方法也是比较推荐的一种
- 第三种方法是前二种都不能用的情况下使用,不是很推荐使用
到此这篇关于uniapp返回上一页执行上一页方法解决方案的文章就介绍到这了,更多相关uniapp返回上一页执行上一页内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!
相关文章
图解prototype、proto和constructor的三角关系
在javascript中,prototype、constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系,楼主就着自己对它们的浅显认识,来粗略地理理以备忘,有不对之处还望斧正。2016-07-07javascript history对象(历史记录)使用方法(实现浏览器前进后退)
本文主要介绍了window.history对象使用方法2014-01-01
最新评论