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

 更新时间:2023年08月22日 10:29:11   作者:BUG_Jia  
这篇文章主要给大家介绍了关于uniapp返回上一页执行上一页方法解决方案,在UniApp中可以通过uni.navigateBack()方法返回上一个页面,文中通过代码示例介绍的非常详细,需要的朋友可以参考下

引言

在使用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返回上一页执行上一页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 全面了解js中的script标签

    全面了解js中的script标签

    下面小编就为大家带来一篇全面了解js中的script标签。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript基本对象

    JavaScript基本对象

    JavaScript基本对象...
    2007-01-01
  • 在JavaScript中访问字符串的子串

    在JavaScript中访问字符串的子串

    这篇文章主要介绍了在JavaScript中访问字符串的子串,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-07-07
  • Javascript执行效率全面总结

    Javascript执行效率全面总结

    Javascript中的作用域链、闭包、原型继承、eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下
    2013-11-11
  • javascript数据代理与事件详解分析

    javascript数据代理与事件详解分析

    所谓数据代理(也叫数据劫持),指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象
    2021-11-11
  • 在javascript中关于节点内容加强

    在javascript中关于节点内容加强

    本篇文章,小编为大家介绍,关于在javascript中关于节点内容加强的问题
    2013-04-04
  • js实现鼠标拖拽缩放div实例代码

    js实现鼠标拖拽缩放div实例代码

    这篇文章主要介绍了js实现鼠标拖拽缩放div,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Windows下用PyCharm和Visual Studio开始Python编程

    Windows下用PyCharm和Visual Studio开始Python编程

    这篇文章主要介绍了Windows下用PyCharm和Visual Studio开始Python编程,这两个软件也是Windows下Python的IDE的代表,需要的朋友可以参考下
    2015-10-10
  • js基石系列学习之错误类型

    js基石系列学习之错误类型

    这篇文章主要为大家介绍了js基石系列学习之错误类型示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 使用Script元素发送JSONP请求的方法

    使用Script元素发送JSONP请求的方法

    下面小编就为大家带来一篇使用Script元素发送JSONP请求的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论