小程序滚动穿透解决方案

ZionHH

已于 2023-03-06 15:50:53 修改

阅读量795

点赞数 2

分类专栏：微信小程序文章标签：前端小程序滚动穿透

于 2021-11-19 10:14:25 首次发布

本文链接：https://blog.csdn.net/z291493823/article/details/121415933

版权

微信小程序专栏收录该内容

9 篇文章 0 订阅

订阅专栏

方法1. 在遮罩层添加catchtouchmove

<view class="modal-cover" catchtouchmove>
	<!-- 弹出层需要滚动使用 scroll-view -->
	<scroll-view></scroll-view>
</view>

方法2. 在页面添加page-meta（文档）

<page-meta page-style="{{showModal ? 'overflow: hidden' : ''}}" />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ZionHH

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序 - 解决遮罩层的滚动穿透问题（以及实现弹框功能点击蒙层关闭弹框）

sunshime的博客

09-24

2606

今天我在做一个点击某个按钮显示弹框的时候，发现弹框自带的蒙层盖完整个页面了，但是被盖住的内容还是可以上下滑动，这个效果并不是我想要的，经过我多次研究并百度之后，我终于可以解决这个问题了，下面我来说一下如何实现的：注意点：这个效果在编辑器（电脑）上面是看不出效果的，需要用手机上看才能看出效果 1、弹框里面没有滚动条的情况：直接在弹框蒙层最外层加上catchtouchmove="{{tru...

微信小程序scroll-view实现滚动穿透和阻止滚动的方法

10-18

主要介绍了微信小程序scroll-view实现滚动穿透和阻止滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

小程序页面滚动穿透

这魏先森-forguo

06-26

5340

小程序页面滚动穿透一、场景在项目当中，基础遇到这样的需求有一个长列表，或者其他可滚动展示的页面，在这个页面会弹出一个Modal层，如下：贝壳找房的的筛选栏二、问题如果这个弹框内容不可滚动，不会有太大问题；但是当弹出内容是可以滚动的时候，就会有问题，触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面，三、解决办法程序员是面向Google编程的，找到了下面的解决办法：监听弹框状态，如果弹框展示就给列表添加对应样式 // isShowMask 弹框是否展示

解决微信小程序自定义弹窗滚动穿透问题

记录本人工作中遇到的问题、经验总结以及分享。

05-31

4660

在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。垂直滚动，并将scroll-view的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。当出现弹窗时，为wxml最外层元素动态添加fixed类。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。可以实现弹框背景不滚动，但是。也会导致弹框自身无法滚动。

微信小程序滚动穿透问题

Hassan的小博客!

02-10

4413

微信小程序滚动穿透

解决微信小程序页面滚动穿透问题

m0_37873510的博客

12-02

2893

解决微信小程序滑动弹框底部内容依然滚动的滚动穿透问题

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

12-13

在微信小程序开发中，经常会遇到一个用户体验上的问题，即“滚动穿透”或称为“蒙层穿透”。这个问题发生在当用户打开一个使用`fixed`布局的蒙层（如弹窗）时，即使手指在蒙层上滑动，底部内容也会跟随滚动。这显然...

微信小程序解决滚动穿透

m0_50005691的博客

05-30

700

解决微信小程序滚动穿透问题多种情况

微信小程序 - 解决弹框遮罩层的滚动穿透问题

qinnzheng

09-16

5249

小程序穿透

小程序中的几种情况下滑动穿透解决方案

BetterGG的博客

08-02

7001

情景一：只要求滑动遮罩区域时，底部内容不可滚动在遮罩层设置 catchtouchmove 函数 <view class='{{cover}}' data-id='first' catchtouchmove="preventD"></view> 在 js 页面设置该函数 preventD: function() { retur...

小程序滑动穿透问题处理

ITzhongzi的博客

06-04

400

滑动穿透描述当我们在弹出层或者模太框上滑动手指的时候，最底下的UI视图跟着滑动。 解决方案 在滑动的元素上加上一个空的滑动事件（万能方法） /*这是弹出层的盒子*/ <view catchtouchmove="touchmove"> </view> touchmove: function(){ }, 这样手指滑动就会触发这个滑动事件，而不会向上传导，导致滑动穿透。注意： 小程序提供bind 和 catch两种绑定事件方法，bind是会冒泡的，catch

微信小程序中滑动view视图的时候，里面的那个view也会跟着滑动，解决办法滚动穿透问题只需要在该页面js的onShow中加上wx.setPageStyle即可

热门推荐

czw

09-25

1万+

微信小程序中遮罩层滚动穿透问题

小程序滑动穿透问题

Elaine20132014的博客

11-28

283

1.如果弹出层没有滚动事件，就直接在蒙板上加catchtouchmove="move" move:function(){}; 2.如果弹出层有滚动事件，那么在弹出层出现的时候给底部的containerView加上一个class {position：fixed}，弹出层消失的时候移除。 https://segmentfault.com/q/1010000011134345...

解决小程序自定义弹窗滚动穿透问题

weixin_43923808的博客

11-24

2183

方法一、catchtouchmove="true"

解决小程序弹出层滚动穿透的问题

wangchaoqi1985的博客

12-17

解决小程序弹出层滚动穿透的问题

记录一次小程序滚动穿透解决方案

qq_45246017的博客

01-20

140

场景描述：自定义的小程序弹窗中存在列表滚动，手机操作时发现有滚动穿透现象个人觉得一个比较好用的方法====》：底层页面使用scroll-view组件包裹，设置垂直滚动，高度设置为屏幕高度，这样弹框自身内容可以滚动并且不会影响到底层页面 <scroll-view scroll-y style="height:{{windowHeight}}px">底部页面</scroll-view> <view>自定义弹窗部分</view> on.

微信小程序滚动穿透问题与蒙层防滑解决方案

总结来说，解决微信小程序中的滚动穿透问题需要根据蒙层是否有滚动条来选择不同的策略，通过精确控制滚动行为，确保用户的交互体验。在实际开发中，注意代码的可维护性和性能优化，是保证这种问题得到妥善解决的关键...