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的变量提升以及使用方法

    详谈js的变量提升以及使用方法

    在本专栏中小编给大家整理了关于js的变量提升以及使用方法的相关知识点内容,需要的朋友们参考下。
    2018-10-10
  • 深入理解JavaScript系列(41):设计模式之模板方法详解

    深入理解JavaScript系列(41):设计模式之模板方法详解

    这篇文章主要介绍了深入理解JavaScript系列(41):设计模式之模板方法详解,模板方法(TemplateMethod)定义了一个操作中的算法的骨架,而将一些步骤延迟到子类中,模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤,需要的朋友可以参考下
    2015-03-03
  • 深入理解JavaScript系列(48):对象创建模式(下篇)

    深入理解JavaScript系列(48):对象创建模式(下篇)

    这篇文章主要介绍了深入理解JavaScript系列(48):对象创建模式(下篇),本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码,需要的朋友可以参考下
    2015-03-03
  • 浅谈js的setInterval事件

    浅谈js的setInterval事件

    这篇文章主要介绍了js的setInterval方法的用法以及示例,非常的有用,这里推荐给小伙伴们
    2014-12-12
  • 浅谈javascript:两种注释,声明变量,定义函数

    浅谈javascript:两种注释,声明变量,定义函数

    下面小编就为大家带来一篇浅谈javascript:两种注释,声明变量,定义函数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • Javascript数组Array方法解读

    Javascript数组Array方法解读

    这篇文章是Javascript数组Array系列文章的第二篇,主要给大家讲解的是javascript数组arrayd的所有方法,希望大家能够喜欢。
    2016-03-03
  • JavaScript String 对象常用方法详解

    JavaScript String 对象常用方法详解

    下面小编就为大家带来一篇JavaScript String 对象常用方法详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JSON为什么那样红为什么要用json(另有洞天)

    JSON为什么那样红为什么要用json(另有洞天)

    json是1年内迅速红遍全球的东东;json.org是一种简洁有效的数据载体,是一种用字符串表示复杂js对象的方式,后端好生成,前端0解释,接下来详细介绍json风行的几点原因
    2012-12-12
  • C#中对象与JSON字符串互相转换的三种方式

    C#中对象与JSON字符串互相转换的三种方式

    这篇文章介绍了C#中对象与JSON字符串互相转换的三种方式,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • 使用原生JS获取select元素选中的value和text值

    使用原生JS获取select元素选中的value和text值

    这篇文章介绍了使用原生JS获取select元素选中的value和text值,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03

最新评论