您的当前位置:首页正文

uniapp微信小程序页面返回或者组件返回触发父组件刷新

2024-11-29 来源:个人技术集锦

背景:有时候可能会出现,组件中套组件的情况,但是在微信小程序中,组件并没有页面的onshow等其他的生命周期方法,获取不了最新的数据。例如公告列表,我点击创建公告,提交之后返回公告列表,但是公告列表并没有获取到最新的数据,因为没有生命周期。这时候就要用到返回触发了。

1.在子组件中定义一个返回方法

handleReturn() {
      let pages = getCurrentPages();
      uni.navigateBack({
          delta: 1,
          success() {
            //pages.length-1 即最后一个为当前页,所以取当前页面的上一级
            pages[pages.length - 2].$vm.getInfo();
          },
        });
    },

2.在父组件中定义方法getInfo,用于获取你需要的数据。

其他情况:

这时候细心的同学会发现有一个问题,就是当在手机的时候,用户滑动退出页面的时候,该方法并没有被触发。此时我们就需要用到组件销毁来进行判断。

  beforeDestroy() {
    if (!this.goback) {
      let pages = getCurrentPages();
      // 回到上一页
      pages[pages.length - 2].$vm.getInfo();
    }
  },

使用组件生命周期或者页面生命周期来触发用户离开页面的行为,同时为了防止,用户点击返回按钮离开页面,同时触发多次。可以使用一个变量来进行控制。 

显示全文