[web教学] uniapp:返回上页革新的方式,常用于详情返回列表

[复制链接]
查看742 | 回复0 | 2023-8-23 11:57:30 | 显示全部楼层 |阅读模式 来自 中国北京
题目形貌:

在利用uniapp开发的过程中,我信赖,我们都肯定遇见过如下的场景:
进入了一个列表页,列表页进入详情页,在详情页进行了一些利用,比如,删除,修改,编辑,提交,乐成之后返回到列表页,那么这个时间,假如我们的列表页不进行数据的革新,就会给用户一种错觉,我刚才进行利用的那条数据会不会没乐成,我们下拉革新下列表,这个数据就酿成最新的了,这个是很常见的一个交互场景,那么怎样不让用户进行下拉革新大概重新进入列表页的利用,我提供几种比力常用的做法!

办理方案

uni-app小程序监听左上角的返回按钮,革新上一个页面的数据
第一种方法:
必要注意的一点是,必要在页面卸载的周期内,把自界说的变乱off掉
  1. B页面
  2. onUnload(){
  3.             uni.$emit("getlist",{})//这里可以传个空,也可以传值过去
  4.             uni.navigateBack({ // 返回上一页
  5.                                 delta: 1
  6.                         })
  7.    }
复制代码
  1. A页面
  2. onShow(){
  3.     uni.$on("getlist", (e)=>{
  4.         this.getwrongtllist();//需要重新访问一下接口。
  5.      })
  6. },
  7. // 用这种方法需要清除,负责会一直调用多次接口
  8. onUnload() {
  9.         // 清除监听
  10.         uni.$off('getlist');
  11. },
  12. // 或者有组件的使用不了小程序的生命周期可以使用  beforedestroy
复制代码
第二种方法:
  1. B页面
  2. onUnload(){
  3.          var pages = getCurrentPages(); //当前页面栈
  4.          if (pages.length > 1) {
  5.            var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
  6.            beforePage.data.refreshIfNeeded = true;
  7.          }
  8.    }
复制代码
  1. A页面
  2. export default {
  3.   data() {
  4.     return {
  5.              refreshIfNeeded: false,
  6.                 }
  7.   }
  8. }
  9. onShow() {
  10.     var pages = getCurrentPages(); // 获取当前页面栈
  11.     var currentPage = pages[pages.length - 1]; // 当前页面
  12.     if (currentPage.data.refreshIfNeeded) {
  13.       currentPage.data.refreshIfNeeded = false;
  14.       this.mescroll.resetUpScroll(); // 调用列表重置刷新页面
  15.       this.mescroll.scrollTo(0,0); // 滚动页面置顶
  16.     }
  17.   }
复制代码
第三种方法:
  1. B页面 返回
  2. payData.success = (res) => {
  3.         uni.showToast({
  4.                 title: '支付成功',
  5.                 success: () => {
  6.                         setTimeout(() => {
  7.                                 uni.navigateBack();
  8.                         }, 2000)
  9.                 }
  10.         })
  11. }
复制代码
  1. A页面 返回的时候可以先清空数据,然后再请求一次接口
  2. onShow() {
  3.         this.orderList = []
  4.         this.currentPage = 1
  5.         this.gettradelist()
  6. }
复制代码

总结:



  • 第一种方法肯定要在脱离页面的时间清撤除界说的变乱否则会请求接口多次
  • 第二种方法也是比力保举的一种
  • 第三种方法是前二种都不能用的环境下利用,不是很保举利用

来源:https://blog.csdn.net/weixin_58791464/article/details/127689424
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则