解决微信小程序中的滚动穿透问题

网络编程 2024/12/26 佚名

3 1 2

Mask-Scroll

> 原码地址 *

蒙层防穿透问题

> 蒙层穿透就是，当你用fixed 布局让蒙层显示的时候，手指滑动屏幕会出现底部内容也滑动的现象. 如图：

当蒙层出现的时候，你滚动屏幕，底部内容也一起跟着滚动。这就是蒙层穿透，也可以叫 '滚动穿透'. 当然出现这种情况，用户体验当然是不好的了。所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动狗头...)

## 解决方案

这种要分情况，

当蒙层没有滚动条的时候。
当蒙层出现滚动条的时候

1. 当弹窗没有滚动条的时候。

直接监听 catch:touchmove 方法，然后直接返回就可以了。

代码可以去看fixed 目录下的文件

主要代码：

*// wxml* <view "fixed-mask" "hideMsak" "{{isShowMask}}" "stopMove"> "mask-container" > "mask__item"> "text-align: center">

上面是当弹窗没有滚动条的情况，当弹窗出现滚动条的时候。

哦豁，完蛋，弹窗不能滚动了。

2. 当弹窗有滚动条的时候

方法一：

动态给底部滚动的元素添加固定定位。也就是当出现弹窗的时候添加一个 class 样式类

效果如图：

代码在scroll1 文件夹。

*// css* 

.bottom-fixed {

 position: fixed;

 left: 0;

 top: 0;

 overflow: hidden;

}

*// wxml*

 <view class="dog-container {{isShowMask "></view>

大家可以看到因为底部元素给固定到页面顶部了，而不是你点击弹窗时出现的位置。目前自己还没有找到解决方法。如果大佬有会的，不吝赐教。。

*方法二：*

> scroll-view 设置高度以及纵向滚动方向。

不过scroll-view 会有一些bug

详情查看

代码在scrooll 文件夹

效果如下图：

总结

以上所述是小编给大家介绍的解决微信小程序中的滚动穿透问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

小程序滚动穿透,小程序,穿透

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“解决微信小程序中的滚动穿透问题”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年12月26日

解决微信小程序中的滚动穿透问题

JavaScript生成一个不重复的ID的方法示例

微信小程序左滑删除实现代码实例

评论“解决微信小程序中的滚动穿透问题”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接