15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 uinapp

uniapp自定义返回

苗成龙| 发布于 2021-11-01 00:25:41| 476阅读| 0点赞| 0评论
举报

uni-app自定义返回

uni-app 的页面新增 onBackPress(event) 生命周期函数。

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

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

Android 实体返回键 (from = backbutton)

顶部导航栏左边的返回按钮 (from = backbutton)

返回 API,即 uni.navigateBack() (from = navigateBack)

页面中的遮罩处于显示状态时,点击返回不希望直接关闭页面,而是隐藏掉遮罩。遮罩隐藏后,继续点击返回再执行默认的逻辑。

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

新建 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>
0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

苗成龙
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部