文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序阻止手机自带的滑动返回退出事件(uni-app,微信小程序,page-container)

2023-09-10 10:01

关注

1、使用page-container前先在pages.json配置(重点!)

"usingConponents":{"page-container":"/pages/detail/detail"},

在这里插入图片描述

在页面中配置

<page-container :show="true" :close-on-slideDown="false" :overlay="false" :duration="false"style="z-index: 99;width: 100%; overflow: auto;height:100vh"@touchstart.native="onTouchStart"@touchmove.native="onTouchEnd"><view style="z-index: 999;pointer-events:auto"> //页面内容</page-container>

@touchstart.native和@touchmove.native是用于遮罩层滑动的监听事件

//触摸事件(开始)onTouchStart(e) {this.isShow = truethis.startX = e.touches[0].clientX;this.startY = e.touches[0].clientY},//触摸事件(结束)onTouchEnd(e) {this.endX = e.changedTouches[0].clientX // 触摸终点const subX = this.startX - this.endX // 触摸滑动距离if (subX > 50 || subX < -50) {//滑动一定范围后操作,弹出弹窗或者提示}},

关于page-container 的一些属性
详细可以按照官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

在这里插入图片描述

来源地址:https://blog.csdn.net/weixin_47211345/article/details/129466086

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯