uni-app自定义返回逻辑教程-阿里云开发者社区

开发者社区> 黑白小熊猫> 正文

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

简介: 自 HBuilderX v1.1.0 起,uni-app 的页面新增 onBackPress(event) 生命周期函数。 onBackPress(event) 返回 event ={form: backbutton | navigateBack} 说明 当用户进行以下操作时,会触发该函数: A...
+关注继续查看

自 HBuilderX v1.1.0 起,uni-app 的页面新增 onBackPress(event) 生命周期函数。

onBackPress(event) 返回 event ={form: backbutton | navigateBack}

说明

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

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

注意事项:

  • 只有在该函数中返回值为 true 时,才表示不执行默认的返回,自行处理此时的业务逻辑。
  • 不返回或返回其它值,均会执行默认的返回行为。
  • 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。

<template>
    <view>
    </view>
</template>

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

<style>

</style>

应用退出

场景说明:

若在App首页,点击手机物理返回键,此时无返回页面可关闭,uni-app默认会提示“再按一次退出应用”;若想自定义退出信息,如修改为:出现一个拟态窗口提示我们是否退出应用,点击确定退出应用。点击取消,不做操作。

实现方案:

在 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
   }
},

实现效果如下图:

back

运行体验

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

附件下载

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Gear的技术优势
Gear 关键的技术创新在于其新颖的跨合约通信方式。Gear 使用 Actor 通信模型和 WebAssembly VM,支持并行处理,并具有速度快、成本低的优势。 事实证明, WebAssembly VM 比任何其他方案运行速度都要快。使用 WebAssembly 可以让 GEAR 的智能合约直接编译成机器码,运行速度媲美原生。更快的速度意味着更低的交易成本和更高的效率。
9 0
10个最好的 JavaScript 动画库【值得收藏】
10个最好的 JavaScript 动画库【值得收藏】
8 0
xy哥怒肝,前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路获取!!!
xy哥怒肝,前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路获取!!!
11 0
你真的了解CSS3硬件加速吗?
你真的了解CSS3硬件加速吗?
23 0
ThreadLocal不好用?那是你没用对!(6)
ThreadLocal不好用?那是你没用对!(6)
4 0
用谷歌云自建微软GitHub codespaces和VScode.dev云编译Cloud IDE是怎样一种体验?
你将拥有比微软官方vscode.dev 更强大的vscode谷歌云IDE,你可以随时随地坐在马桶上用599块钱的小米手机登陆网页版vscode开发一款APP,比如:Tiktok;这个网页版vscode比微软GitHub codespaces和VScode.dev官方更强大,它同样拥有terminal,重点是它编译不受本地网络的限制可以远程云编译,高速高效随时随地,而且是使用强大谷歌云服务器进行编译,爽哼! 下一步咱们搞个Android studio网页版云编译平台,好不好,宝? 下下一步咱们使用599块钱的小米手机远程连接网页版vscode和网页版Android studio开发一款安卓ap
8 0
React 18 新特性概览 【React 面试必问】
React 18 新特性概览 【React 面试必问】
4 0
SpringBoot 系列教程(一百零八):SpringBoot整合Orika实体映射工具
SpringBoot 系列教程(一百零八):SpringBoot整合Orika实体映射工具
8 0
+关注
黑白小熊猫
技术,没有上限
9
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载