小程序自定义弹框，滑动屏幕穿透底层页面跟着滚动问题

最新推荐文章于 2021-06-16 16:06:44 发布
最新推荐文章于 2021-06-16 16:06:44 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 公众号/小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helenwei2017/article/details/105708016
版权

小程序在开发过程中有时候需要自定义弹窗，那么问题就来了，自定义的弹窗在上下滑动时，会穿透到底层页面跟着一起滑动，这样用户体验相当不好，具体解决办法即给自定义弹框添加一个属性catchtouchmove="true"见如下代码：
 

ps：需要在真机上测试才有效果。

网上有伙伴说这个方法失效，目前我暂时使用是ok的，不排除有其他的情况，后面遇到了再补充

H-L
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序自定义弹出模态框禁止底部滚动功能
10-15
主要介绍了微信小程序自定义弹出模态框禁止底部滚动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
小程序自定义蒙版弹层，滑动的时候后面内容也跟随滑动(被穿透)问题解决
李小乐er
01-20 585
wxml部分： <viewclass="modal" catchtouchmove="stopMovePage"></view> js部分: stopMovePage () { return; } 将手指触摸后移动return掉。就可以解决蒙版被穿透问题。
微信小程序弹出框 页面依然可以滑动的解决
weixin_30752377的博客
09-20 655
在蒙层的最外层view中加入catchtouchmove=”preventTouchMove” -js 中写一个空白函数 1 preventTouchMove:function(e) { }, 转载于:https://www.cnblogs.com/ylblogs/p/9681223.html...
微信小程序 解决自定义弹出层滑动时下层页面滚动问题
weixin_34380948的博客
04-22 896
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景一：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。 此种...
小程序catchtouchmove="true" 事件导致页面不能滚动
sinat_38728634的博客
04-28 7902
https://developers.weixin.qq.com/community/develop/doc/000aacfbac8e002f14e6451915b400 弹窗元素设置catchtouchmove="true"目的是为了阻止弹窗滚动的时候 会带动外层页面的滚动，但是如果弹窗元素设置了该属性，弹窗内的自己写的overflow:auto就会失效，这时不能用自己写的overflow，要改...
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
10-17
主要介绍了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能,结合实例形式分析了微信小程序自定义顶部TabBar选项卡页面切换功能的相关布局、样式及功能实现技巧,需要的朋友可以参考下
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
01-20
本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法，供大家参考，具体内容如下 先看效果是否是自己需要的 实现步骤： 1.整个布局用作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性 ...
解决微信小程序中的滚动穿透问题
12-13
在微信小程序开发中，经常会遇到一个用户体验上的问题，即“滚动穿透”或称为“蒙层穿透”。这个问题发生在当用户打开一个使用`fixed`布局的蒙层（如弹窗）时，即使手指在蒙层上滑动，底部内容也会跟随滚动。这显然...
微信小程序页面滑动屏幕加载数据效果
08-29
在微信小程序中，实现页面滑动屏幕加载数据的效果是一项常用且重要的功能，它能提高用户体验，使得用户在浏览内容时无需手动翻页，只需上下滑动即可加载更多数据。本教程将详细介绍如何在微信小程序中实现这一效果。...
微信小程序 显示弹框引发背景下页面滚动问题（滚动穿透问题）移动端同理
qq_35218981的博客
12-17 490
**微信小程序 弹框引发背景下~~~~页面滚动问题（滚动穿透问题）移动端同理** 之前遇到这个滚动传统问题一直没解决，最近终于抽出时间研究了一下，解决一个心头大患，啊啊啊~开心下载demo https://github.com/zhangrui-1993/miniProgram * * * **表现现象：** 在弹出遮罩背景和弹出内容时，滑动弹出内容，背景下面的内容也跟着滑动 **解决思路：** 将底页面设置position:fixed，且要设置当前弹~~~~框时所处位置的top值 H5页面获取方式：
微信小程序-自定义从底部弹起的滚动选择器
10-12
1、选择器增加标题 2、可以拖动选中 3、可以点击选中 4、拖动以及点击都有动画
关于小程序弹窗，滑动弹出视图，根页面page也会滑动问题
linchu9502的博客
01-16 341
项目场景： 点击使用优惠券按钮，弹窗显示用户拥有的优惠券选择使用 问题描述： 滑动弹窗导致底部页面page根页面也跟着滑动 原因分析： 设置了定位问题，弹窗使用了动画导致 解决方案： 设置弹窗最上层view的属性catchtouchmove=“方法名”，这里的方法完全是为了消除控制台的警告，可不做处理。 ...
小程序弹框出现，底部页面也跟随滚动
weixin_30763455的博客
01-23 430
设置catchtouchmove="true" <view class="modal" catchtouchmove="true"> <view class="shade"></view> <view class="content"></view> </view> 转载于:https://www.cn...
微信小程序弹框滑动冒泡，外层页面也被滑动问题
weixin_49985592的博客
03-16 1908
微信小程序弹框滑动冒泡，外层页面也被滑动问题 1、弹框中内容不滚动。 <view class="uni-popup__wrapper-box" catchtouchmove='true'> 滑动弹窗外层页面就不会跟着滑动啦。 2、弹框中内容滚动 如果弹窗里面的内容可滑动滚动，当弹框内容滑倒底部时，再滑外层页面就会被滑动。个人处理办法如下： <view :class="isScroll ? '' : 'no-srcoll'"> ..... ..... </view>
解决微信小程序自定义弹窗，滑动导致底部也一起滑动的几种方案
gzyzwx的博客
08-30 7449
在开发小程序中，自定义弹窗上面滚动，导致底部也一起滑动如左图，接触黑色阴影，会导致底部也一起滑动 解决方案，我总结了以下几种 1、控制底部根目录scroll-view 的scroll-y属性的true/false，控制底部滚动以及不滚动 2、在自定义弹框最外层元素加上catchtouchmove=’true’ ；或者catchtouchmove="preventTouchMove" Pag...
微信小程序解决自定义弹出层滑动时，下层页面滚动问题
厦门在乎科技
06-16 2754
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景一：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。 此种方式会阻止弹窗内内容的滚动。 场景二：弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式，
小程序自定义弹窗禁止底部内容滚动（滚动穿透问题）
web全栈开发的博客
07-04 2458
小程序自带的弹窗比较简单，在实际项目中，我们往往需要自定义弹窗以满足较为复杂的业务需求。弹窗时底层内容一般都是不滚动，我们可以用下面几种方法实现： 1、catchtouchmove=“true” 可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动，如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。 <view class="modal" catchtouchmove="true">...
微信小程序之toast等弹框提示
热门推荐
Hedong的博客
02-09 15万+
微信小程序中toast消息提示框只有两种显示的效果，就是成功和加载，使用wx.showToast(OBJECT)。 看下有关参数说明： 代码很简单： wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true
【小程序问题】微信小程序 在canvas画布上划动 页面跟着滑动
L的博客
05-17 1万+
微信小程序官方文档有说明，disable-scroll="true" 可以阻止页面下拉和滚动。这里有个坑，disable-scroll在真机上如果要生效，那么要给canvas绑定一个触摸事件才能生效。&lt;canvas disable-scroll="true" bindtouchmove="touchMove"&gt;&lt;/canvas&gt; 顺便说一下canvas触摸事件的坑，在can...
微信小程序在地图上的弹框滑动会穿透到地图上导致地图移动r如何解决
最新发布
06-10
这个问题常见于基于地图的移动端应用中，解决方法如下： 1. 将地图和弹框分别放在两个 div 中，通过设置 z-...综上所述，通过以上方法可以有效解决微信小程序在地图上的弹框滑动会穿透到地图上导致地图移动的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值