UniApp返回上一页执行方法的几种解决方案

作者:百宝袋时间:2026-10-30 23:11:48浏览:503

本文介绍在UniApp开发中,从详情页返回列表页时如何自动刷新数据。提供三种方案:利用uni.$emit/off全局事件、通过getCurrentPages修改上一页数据、以及返回前清空数据重新请求。重点强调事件监听的清理机制,避免重复请求。

引言

在UniApp开发实践中,开发者常遇到以下场景:

用户从列表页进入详情页,在详情页执行删除、修改、编辑或提交等操作后返回。若列表页未自动刷新,用户会疑惑操作是否成功,需手动下拉刷新或重新进入列表页才能看到最新数据。这是常见的交互痛点,本文提供几种常用解决方案,避免用户手动刷新。

解决方案

在UniApp小程序环境中,监听左上角返回按钮并刷新上一页数据。

方法一

需注意,必须在页面卸载周期内移除自定义事件监听。

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返回上一页执行上一页方法的解决方案介绍完毕。如需了解更多相关内容,请搜索本站历史文章或继续浏览后续文章,感谢支持!

作者最新文章