当前位置:   article > 正文

uni-app:navigateBack返回上一页(含参数传递)

navigateback

代码

不含参数回传

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

  1. export default {
  2. methods: {
  3. navigateBack() {
  4. uni.navigateBack({
  5. delta: 1,
  6. success: () => {
  7. // 返回成功后的回调函数
  8. },
  9. fail: () => {
  10. // 返回失败后的回调函数
  11. }
  12. });
  13. }
  14. }
  15. }

含参数回传

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

 当前页面

  1. export default {
  2. methods: {
  3. navigateBack() {
  4. uni.$emit('refreshPreviousPage', { data: '要设置的数据值' });
  5. uni.navigateBack({
  6. delta: 1,
  7. });
  8. }
  9. }
  10. }

上一页面

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

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

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

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

  1. export default {
  2. mounted() {
  3. uni.$on('refreshPreviousPage', (data) => {
  4. this.refreshPage(data.data);
  5. });
  6. },
  7. methods: {
  8. refreshPage(data) {
  9. // 执行刷新页面的操作,并设置data值
  10. this.dataValue = data;
  11. // ...
  12. },
  13. }
  14. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/824591
推荐阅读
相关标签
  

闽ICP备14008679号