当前位置: 首页 > 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.lqws.cn/news/513433.html

相关文章:

  • 服务器性能优化通用方案
  • 文档处理控件Aspose.Words教程:在.NET中将多页文档转换为单个图像
  • 【开源解析】基于PyQt5的智能费用报销管理系统开发全解:附完整源码
  • Golang单例实现
  • LVS-NAT负载均衡群集实战:原理、部署与问题排查
  • 小程序快速获取url link方法,短信里面快速打开链接
  • Spark Streaming 与 Flink 实时数据处理方案对比与选型指南
  • Flink2.0 配置 historyserver
  • 15个AI模拟面试平台 和 简历修改 / 真人面试平台
  • 云计算产业链
  • 用wordpress建日语外贸网站的优势
  • C# Avalonia 绑定模式 Mode 的区别,它们的应用场景
  • spring中的@Cacheable缓存
  • MicroPython网络编程:AP模式与STA模式详解
  • 【笔记——李沐动手学深度学习】2.3 线性代数
  • 【Python练习】012. 使用字符串的upper()方法将字符串转换为大写
  • 基于开源AI大模型、AI智能名片与S2B2C商城小程序的美食菜单社交化营销创新研究
  • 音频转换芯片DP7344兼容CS4344双通道24位DA转换器技术资料
  • 宠物养成小游戏流量主微信小程序开源
  • 小米互联应用曝高危漏洞,攻击者可绕过认证获取设备完全控制权
  • 使用GithubActions和腾讯CloudBase自动发布静态网页
  • 暴雨信创电脑代理商成功中标长沙市中医康复医院
  • 019 高校心理教育辅导系统技术解析:构建心理健康守护平台
  • aspose.word在IIS后端DLL中高并发运行,线程安全隔离
  • HarmonyNext动画大全02-显式动画
  • 从数据到决策:UI前端如何利用数字孪生技术提升管理效率?
  • 计算机网络 网络层:数据平面(二)
  • LeetCode 142题解 | 环形链表Ⅱ
  • 【MCP服务】蓝耘元生代 | MCP平台:部署时间服务器MCP,开启大模型交互新体验
  • [架构之美]Redis客户端命令指南