uni-app自定义返回逻辑教程

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app自定义返回逻辑教程

说明

当用户进行以下操作时，会触发该函数：

  • Android 实体返回键 (from = backbutton)
  • 顶部导航栏左边的返回按钮 (from = backbutton)
  • 返回 API，即 uni.navigateBack() (from = navigateBack)

注意事项：

  • 只有在该函数中返回值为 true 时，才表示不执行默认的返回，自行处理此时的业务逻辑。
  • 当不阻止页面返回却直接调用页面路由相关接口（如：uni.switchTab）时，可能会导致页面显示异常，可以通过延迟调用路由相关接口解决。
  • 不返回或返回其它值，均会执行默认的返回行为。
  • H5 平台，顶部导航栏返回按钮支持 onBackPress()，浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()
  • 暂不支持直接在自定义组件中配置该函数，目前只能是在页面中来处理。

场景示例

页面返回

自定义遮罩

通常自定义的遮罩/弹出层，都会做成组件，这样方便复用。

新建 uni-app 项目->components->mask.vue 文件，代码如下：

<template>  
    <view>  
        <view class="cpt-mask">  
        </view>  
    </view>  
</template>  

<script>  
    export default {}  
</script>  

<style>  
    .cpt-mask {  
        position: fixed;  
        top: 0;  
        left: 0;  
        width: 100%;  
        height: 100%;  
        background-color: #000000;  
        opacity: 0.5;  
        z-index: 99;  
    }  
</style>

引用遮罩组件

在页面中引入 mask 自定义组件后，通过一个状态值来控制其隐藏/显示。

<mask v-if="showMask"></mask>

这里用 v-if，不要用 v-show，自定义组件存在一些问题待优化。

处理返回逻辑

在 onBackPress 中，判定当前遮罩是否处于显示状态。如果显示，则关闭遮罩并返回 true。

onBackPress() {  
  if(this.showMask) {  
    this.showMask = false;  
    return true;  
  }  
},

多级返回

部分业务场景下，返回的逻辑中需要返回多级页面。

由于 uni.navigateBack() 同样会触发 onBackPress 函数。因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。

此时，需要根据 onBackPress 的回调对象中的 from 值来做处理，当来源是 'navigateBack' 时，返回 false。

export default {  
    data() {  
        return {};  
    },  
    onBackPress(options) {  
        if (options.from === 'navigateBack') {  
            return false;  
        }  
        this.back();  
        return true;  
    },  
    methods: {  
        back() {  
            uni.navigateBack({  
                delta: 2  
            });  
        }  
    },  
}

应用退出

实现方案

在 onBackPress 中,遮罩不显示的状态下，点击返回键将弹出拟态窗。

onBackPress() {  
   if(this.showMask) {  
     this.showMask = false;  
     return true;  
   }else{  
      uni.showModal({  
        title: '提示',  
        content: '是否退出uni-app？',  
        success: function(res) {  
            if (res.confirm) {  
                // 退出当前应用，改方法只在App中生效  
                plus.runtime.quit();  
            } else if (res.cancel) {  
                console.log('用户点击取消');  
            }  
        }  
      });  
      return true  
   }  
},

退出应用提示

运行体验

完整的示例代码，见附件。解压后，拖至 HBuilderX 运行即可。


Harmonyos Next教程
1 回复

当然，以下是一个关于如何在uni-app中实现自定义返回逻辑的代码案例。在这个例子中，我们将展示如何在用户点击返回按钮时执行一些自定义操作，比如弹出一个确认对话框，只有在用户确认后才允许返回上一页。

步骤1：设置全局返回拦截

首先，我们可以在App.vue中设置全局的返回拦截逻辑。利用onBackPress事件，我们可以拦截到返回按钮的点击事件。

<script>
export default {
  onBackPress(event) {
    if (event.from === 'navigateBack') {
      uni.showModal({
        title: '提示',
        content: '你确定要返回吗？',
        success: function (res) {
          if (res.confirm) {
            // 用户点击确定，允许返回
            return false; // 返回false表示不拦截返回行为
          } else if (res.cancel) {
            // 用户点击取消，阻止返回
            return true; // 返回true表示拦截返回行为
          }
        }
      });
      return true; // 默认拦截返回行为，等待模态框结果
    }
    // 如果不是navigateBack触发，则不拦截
    return false;
  }
}
</script>

步骤2：在特定页面覆盖全局返回逻辑（可选）

如果某些页面需要覆盖全局的返回逻辑，可以在这些页面的onBackPress方法中实现自定义逻辑。

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  onBackPress(event) {
    if (event.from === 'navigateBack') {
      // 页面特定的返回逻辑
      uni.showToast({
        title: '这是特定页面的返回逻辑',
        icon: 'none'
      });
      // 这里可以决定是否拦截返回行为
      // 例如，返回true表示拦截，返回false或不返回任何值表示不拦截
      return true; // 示例：拦截返回行为
    }
    // 如果不是navigateBack触发，则不拦截
    return false;
  }
}
</script>

注意事项

  1. onBackPress方法只在页面栈中存在多个页面时才有效，即至少有两个页面时才能触发返回事件。
  2. 拦截返回行为时，返回true表示拦截，返回false或不返回任何值表示不拦截。
  3. 在全局和页面级别的onBackPress方法中，都可以根据需要执行自定义的逻辑，比如弹出模态框、显示Toast等。

通过上述步骤，你可以在uni-app中实现自定义的返回逻辑，满足不同的需求。

回到顶部