uniapp返回上一页执行上一页方法解决方案

 更新时间:2023年08月22日 10:29:11   作者:BUG_Jia  
这篇文章主要给大家介绍了关于uniapp返回上一页执行上一页方法解决方案,在UniApp中可以通过uni.navigateBack()方法返回上一个页面,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云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返回上一页执行上一页内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • 详解JavaScript中的every()方法

    详解JavaScript中的every()方法

    这篇文章主要介绍了JavaScript中的every()方法,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 关于JavaScript对象类型之Array及Object

    关于JavaScript对象类型之Array及Object

    这篇文章主要介绍了关于JavaScript对象类型之Array及Object,Array 类型是 ECMAScript 中最常用的类型了。而且,ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别,需要的朋友可以参考下
    2023-05-05
  • Knockoutjs快速入门(经典)

    Knockoutjs快速入门(经典)

    Knockoutjs是一个JavaScript实现的MVVM框架.主要有如下几个功能1. Declarative bindings2. Observables and dependency tracking3. Templating,需要了解的朋友可以参考下
    2012-12-12
  • JavaScript表达式:URL 协议介绍

    JavaScript表达式:URL 协议介绍

    javascript:后面可以是表达式或者使用分号分隔的表达式集合如javascript: 5 + 4,感兴趣的朋友可以参考下或许可以帮助到你
    2013-03-03
  • offsetParent 算法分析

    offsetParent 算法分析

    以下部分内容翻译自 W3C 的 CSSOM View Module,W3C 工作草案 2008年2月22日。
    2010-04-04
  • Javascript常考语句107条收集

    Javascript常考语句107条收集

    Javascript常考语句,对于需要考js前端开发人员能用得到,也是一些基础的东西。
    2010-03-03
  • 基于javascript 闭包基础分享

    基于javascript 闭包基础分享

    闭包向来给包括JavaScript程序员在内的程序员以神秘,高深的感觉,事实上,闭包的概念在函数式编程语言中算不上是难以理解的知识
    2013-07-07
  • 图解prototype、proto和constructor的三角关系

    图解prototype、proto和constructor的三角关系

    在javascript中,prototype、constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系,楼主就着自己对它们的浅显认识,来粗略地理理以备忘,有不对之处还望斧正。
    2016-07-07
  • javascript学习笔记(四)function函数部分

    javascript学习笔记(四)function函数部分

    本文主要介绍了函数的调用方式、返回函数的函数、创建匿名函数、javascript创建动态函数、回调函数、方法和函数的区别、js全局函数、函数的几个作用、prototype属性、高阶函数,非常实用,有需要的参考下
    2014-09-09
  • javascript history对象(历史记录)使用方法(实现浏览器前进后退)

    javascript history对象(历史记录)使用方法(实现浏览器前进后退)

    本文主要介绍了window.history对象使用方法
    2014-01-01

最新评论

?


http://www.vxiaotou.com