微信小程序解决遮罩层滑动穿透问题

最新推荐文章于 2024-07-03 11:48:41 发布
最新推荐文章于 2024-07-03 11:48:41 发布
阅读量286 收藏
点赞数
文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43691337/article/details/125404552
版权
这篇博客主要介绍了如何使用`<page-meta>`组件在微信小程序中进行页面样式控制，特别是针对弹窗显示时的页面溢出隐藏和继承的处理方法。参考链接提供了微信官方对于`page-meta`组件的详细文档，帮助开发者更好地理解和使用该组件来优化用户体验。
摘要由CSDN通过智能技术生成
游在云里的鱼
关注
微信小程序 - 解决遮罩层的滚动穿透问题（以及实现弹框功能点击蒙层关闭弹框）
sunshime的博客
09-24 2637
  今天我在做一个点击某个按钮显示弹框的时候，发现弹框自带的蒙层盖完整个页面了，但是被盖住的内容还是可以上下滑动，这个效果并不是我想要的，经过我多次研究并百度之后，我终于可以解决这个问题了，下面我来说一下如何实现的： 注意点：这个效果在编辑器（电脑）上面是看不出效果的，需要用手机上看才能看出效果 1、弹框里面没有滚动条的情况：   直接在弹框蒙层最外层加上catchtouchmove="{{tru...
微信小程序解决自定义弹出层滑动时，下层页面滚动问题
厦门在乎科技
06-16 2817
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景一：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。 此种方式会阻止弹窗内内容的滚动。 场景二：弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式，
微信小程序--遮罩层
12-14
微信小程序--遮罩层，微信小程序--遮罩层，微信小程序--遮罩层，微信小程序--遮罩层，微信小程序--遮罩层，
微信小程序遮罩层滚动穿透的问题 滑动到底的时候整个页面动起来了
qq_27806371的博客
01-30 556
常见的布局 外层一个遮罩层 里面一层是弹窗以及内容 这里还是个textarea 滚动到底的时候 底部的遮罩层也跟着滚动了 叫滚动穿透 处理方法是添加page-meta
微信小程序遮罩层滚动 穿透
weixin_43833482的博客
01-11 308
// 遮罩层 加入 catchtouchmove='true' <view class="mask_box" catchtouchmove='true' > <image bindlongpress="saveImg" data-path="{{posterSrc}}" class="posterSrc" src="{{posterSrc}}" alt=""/> </view>
微信小程序开发 遮罩层弹出框
04-03
微信小程序开发遮罩层弹出框的实现，简单实现，点击弹出遮罩，类似弹出框
小程序基本命令
aiven1637的博客
10-30 3336
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
滚动穿透通常发生在弹窗或半透明遮罩层出现时，用户在这些层上滑动，但希望底层页面的内容能够继续滚动。为了解决这个问题，我们可以利用`catchtouchmove`属性。当一个元素具有`catchtouchmove`属性时，它会捕获触摸...
微信小程序滚动穿透问题与蒙层防滑解决方案
在微信小程序开发中，滚动穿透（Scroll穿透）是指在使用fixed布局时，当弹出的蒙层（如对话框、遮罩层）覆盖在页面上时，用户在滑动蒙层的同时，会意外地带动页面底层内容一同滚动，导致用户体验下降。这个问题对于...
微信小程序 —— 解决自定义弹窗出现后，蒙层下的页面仍可以滚动的问题
热门推荐
Wu_shuxuan的博客
11-30 1万+
在微信小程序开发中，会碰到自定义弹窗出现后，蒙层下面的页面仍可以滚动的问题。例如： 解决方法：1. 先点击出现蒙层时，页面的最外层view：height:100vh （灵活设置，蒙层出现时height:100vh;,反之height: ;）2. 在蒙层的最外层view中加入catchtouchmove=”preventTouchMove” -wxml <view class="Montmor
微信小程序全屏遮罩层代码
08-11
微信小程序全屏遮罩层代码。代码简洁，适合定制开发。
微信小程序-自定义组件-遮罩层
05-05
微信小程序-自定义组件-遮罩层-规则内容显示
微信小程序 遮罩功能实现
03-29
所有的用法是控制显示隐藏的flag的起名的时候都加一个flag.驼峰命名法。   step 1 放一个空块   <view class='mask'></view>   step2 写空块的样式   .mask{ width:100%; height:100%; position:absolute; background-color:#999; z-index:9999; top:0; left:0; opacity:0.5; } 其中颜色可以任选，透明度也可以任选。 有的人做了这样的兼容处理：   -moz-opacity: 0.7; opacity: 0.70; filter: alpha
小程序css实现遮罩弹出层
01-20
小程序中用css实现遮罩弹出层
小程序：微信小程序中遮罩层的滚动穿透问题
我爱吃烧饼
12-03 581
用catchtouchmove=true,并设置样式 <view class="bodyLock" catchtouchmove="{{ismove?'true':''}}"></view> .bodyLock{ top:0px; left: 0px; width: 100%; height: 100%; overflow:...
微信小程序实现一个遮罩层
竹毛言己
04-23 3788
开发中，遮罩层的使用场景很多，例如，loading的时候、例如搜索的时候等。以下是一个案例：点击页面的搜索框，在页面上添加一层遮罩层，显示搜索详情页。页面最上面有一个搜索框，下面有一些其他UI元素。点击首页搜索框时，将遮罩层显示出来即可。最主要的是css样式设置。微信小程序实现遮罩层。
微信小程序遮罩层显示
最新发布
weixin_44032619的博客
07-03 389
微信小程序遮罩层显示
微信小程序 - 解决弹框遮罩层的滚动穿透问题
qinnzheng
09-16 5310
小程序穿透
微信小程序修复蒙层滚动穿透问题全攻略
"微信小程序中存在一个常见的用户体验问题，即所谓的‘滚动穿透’或‘蒙层穿透’。这个问题指的是在使用fixed布局显示蒙层（如弹窗）时，用户滚动屏幕，不仅蒙层会滚动，底部的内容也会跟随滚动。这显然对用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值