uni-app:navigateBack返回上一页

代码

不含参数回传

navigateBack方法中使用uni.navigateBack 来返回上一个页面。delta参数表示返回的页面层数,这里设置为1表示返回上一个页面。

export default {
  methods: {
    navigateBack() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        }
      });
    }
  }
}

含参数回传

要在uni-app中实现返回上一页并刷新上一个页面,并设置上一个页面的data值,可以使用uni.emit和uni.emit和uni.on来实现事件的发布和订阅。

 当前页面

export default {
  methods: {
    navigateBack() {
      uni.$emit('refreshPreviousPage', { data: '要设置的数据值' });
      uni.navigateBack({
        delta: 1,
      });
    }
  }
}

上一页面

在mounted或created生命周期中使用uni.$on来监听事件,并在回调函数中执行刷新和设置data值的操作。

通过uni.$emit发布了一个名为refreshPreviousPage的事件,并传递了{ data: '要设置的数据值' }作为参数。上一个页面使用uni.$on来监听该事件,在回调函数中执行刷新页面和设置data值的操作。

注:在每个页面的<script>标签中引入uni以便正常使用uni.$emituni.$on

这样,当返回上一页时,上一个页面将会被刷新并设置相应的data值。

export default {
  mounted() {
    uni.$on('refreshPreviousPage', (data) => {
      this.refreshPage(data.data);
    });
  },
  methods: {
    refreshPage(data) {
      // 执行刷新页面的操作,并设置data值
      this.dataValue = data;
      // ...
    },
  }
}

猜你喜欢

转载自blog.csdn.net/weixin_46001736/article/details/131846449