当前位置: 首页 > news >正文

微信小程序 / UNIAPP --- 阻止小程序返回(顶部导航栏返回、左 / 右滑手势、安卓物理返回键和调用 navigateBack 接口)

目录

理解page-container的原理

设置禁止点击遮盖层关闭?

阻止左滑返回


理解page-container的原理

page-container组件的所有属性,最重要的是show值。在页面上引入这个组件后,若show值为true,页面上所有各种方式触发的返回操作都会被这个组件所拦截,然后自动将值置为false。当值为false后,这个组件就没有作用了,但是我们可以重新赋值,就能让它重新恢复拦截。 在官方文档中,示例代码在page-container中是有具体组件的,这可能误导我们忽略了让它去实现返回二次确认这种无任何显示的最纯粹的功能。当然,基于page-container其实还能实现各种复杂的覆盖在页面之上的组件。

设置禁止点击遮盖层关闭?

<!-- wxml -->
<page-container show="{{true}}"><view class="detail-mask" catchtouchmove="stopTouchMove"></view><view class="detail-page" catchtouchmove="stopTouchMove"><!-- 你的代码 --></view>
</page-container>
​
/* wxss */
.detail-mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;
}
​
.detail-page {position: relative;min-height: 300px;
}
​
// js
stopTouchMove() {}, // 阻止穿透蒙层

阻止左滑返回

网上、官网上很多人只提到了这种方法可以解决阻止返回问题,却没有很好的说明,导致很多朋友在使用时并没有达到预期效果。下面这个简单理解希望可以帮助到大家。
可以简单理解为在页面生成page-container时会通知小程序需要监听用户返回操作,并且阻止返回一次。
当用户做了返回操作后,小程序执行了阻止返回,然后移除了监听,所以接着再做一次返回操作就直接返回了。
所以要达到不点击确定返回,下一次做返回操作时依旧要阻止,就可以在每次返回点取消时候,移除page-container,再重新生成一个page-container,这时就又会重新通知小程序监听返回一次,所以上文用的是v-if。

<template><view><text>测试阻止返回的页面</text><!-- 阻止返回 --><!--注意一定要用v-if 才可以,不然即使showPage1设置为false,第二次也会直接返回--><view v-if="isShow"><page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container></view></view>
</template>
<script>export default {onLoad(){},data(){return {isShow: true   //一开始设置为显示}},methods: {beforeleave(){this.isShow = false;  //这个很重要,一定要先把弹框删除掉uni.showModal({title: "确定要退出吗",success: (e)=>{if(e.confirm) {//判断是上一个页面进入(返回),还是直接进入这个页面(回首页)let pages = getCurrentPages();if(pages.length === 1){// 返回到首页uni.switchTab({url: "/pages/index'"});}else {// 返回上一页uni.navigateBack({delta: 1})}}else {//点取消,生成新的弹框this.isShow = true;}}})}}}
</script>

http://www.lryc.cn/news/574950.html

相关文章:

  • Feign源码解析:动态代理与HTTP请求全流程
  • 《汇编语言:基于X86处理器》第4章 复习题和练习,编程练习
  • 福彩双色球第2025072期篮球号码分析
  • (LeetCode 面试经典 150 题) 151. 反转字符串中的单词(栈+字符串)
  • UNIAPP入门基础
  • 网络安全是什么?
  • 暴雨信创电脑代理商成功中标长沙市中医康复医院
  • iClone 中创建的面部动画导入 Daz 3D
  • 【请关注】实操mongodb集群部署
  • VS2022的C#打包出错解决
  • Liunx操作系统笔记2
  • RS485 vs CAN总线:工业通信双雄的深度对决
  • syncthing忘记密码怎么办(Mac版)?
  • 【大模型实战】微调Qwen2.5 VL模型,增强目标检测任务。
  • 在IIS上运行PHP时显示PHP错误信息
  • web安全之h2注入系统学习
  • 14.Linux Docker
  • H5录音、图文视频IndexDB储存最佳实践:用AI生成语音备忘录
  • 【MCP服务】蓝耘元生代 | MCP平台:部署时间服务器MCP,开启大模型交互新体验
  • Linux RDMA网络配置手册
  • 【图论题典】Swift 解 LeetCode 最小高度树:中心剥离法详解
  • 【GESP】C++四级考试大纲知识点梳理, (2) 结构体和二维数组
  • 跨线程connect传参的错误
  • 微信小程序适配 iPhone 底部导航区域(safe area)的完整指南
  • 打造丝滑的Android应用:LiveData完全教程
  • 程序快速隐藏软件,提高工作效率
  • 如何搭建CDN服务器?
  • 半导体FAB中的服务器硬件故障监控与预防全方案:从预警到零宕机实战
  • 计算机网络 网络层:控制平面
  • Spring Cloud Ribbon核心负载均衡算法详解