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

最新推荐文章于 2024-09-09 16:31:20 发布

‭‭‭‭‭‭‭王哈哈

最新推荐文章于 2024-09-09 16:31:20 发布

阅读量306

点赞数 1

分类专栏：微信小程序遮罩层滚动穿透微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_43833482/article/details/112470624

版权

微信小程序同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

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

1 篇文章 0 订阅

订阅专栏

// 遮罩层 加入	catchtouchmove='true'  
 <view class="mask_box"  catchtouchmove='true' >
     <image bindlongpress="saveImg" data-path="{{posterSrc}}" class="posterSrc" src="{{posterSrc}}" alt=""/>
  </view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

‭‭‭‭‭‭‭王哈哈

关注关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序中遮罩层的实现

Syleapn的博客

03-13

3万+

近期在写一点小东西，碰到遮罩层，今天把它总结下来，方便大家共同学习：有好几种方法，今天先来第一种。准备工作：一张图片：close.png 一、方法1 先上效果：点击“核算”以后，遮罩层出现，同时conts（即面板）出现。再次点击“核算”或conts右上角的关闭按钮时，遮罩层消失，conts隐藏。源码： wxml代码 <vi...

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

sunshime的博客

09-24

2634

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

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

微信小程序--遮罩层

12-14

微信小程序--遮罩层，微信小程序--遮罩层，微信小程序--遮罩层，微信小程序--遮罩层，微信小程序--遮罩层，

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

weixin_34351321的博客

09-27

201

如果弹出层没有滚动事件: <view wx:if="{{alert}}" catchtouchmove="myCatchTouch"> <template is="alert" data="{{alertData}}" /> </view> myCatchTouch: function () { console.lo...

[uniapp/wx小程序] 关于cover-view滚动/点击穿透问题的解决方案/cover-view 的坑

最新发布

jinwenshuo2007的博客

09-09

561

首先，如果是用view等标签写好的组件，发现了问题，那么建议最后再考虑使用cover-view和cover-image，为什么？需要将所有的view转换成cover-view，所有的text都要包裹上cover-view，所有的icon图标都得废弃并改造成cover-image使用图片代替，单边的border-radius也会失效，这个改起来更麻烦cover-view在应用中的层级最高，并且无法调整以上5点的改造，通常要伴随着css代码改动，js逻辑改动。

微信小程序遮罩层滚动穿透的问题滑动到底的时候整个页面动起来了

qq_27806371的博客

01-30

554

常见的布局外层一个遮罩层 里面一层是弹窗以及内容这里还是个textarea 滚动到底的时候底部的遮罩层也跟着滚动了叫滚动穿透处理方法是添加page-meta

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

我爱吃烧饼

12-03

579

用catchtouchmove=true,并设置样式 <view class="bodyLock" catchtouchmove="{{ismove?'true':''}}"></view> .bodyLock{ top:0px; left: 0px; width: 100%; height: 100%; overflow:...

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

前端_李嘉豪

09-02

1146

解决方法很简单我们只需在遮罩层元素上添加catch:touchmove 即可遇到同样问题的童鞋不妨试试 <view class="Boxshade" catch:touchmove catchtap="ShowList" wx:if='{{isShadeShow}}'> </view> //遮罩层 帮助到大家的童鞋记得关注小编噢喜欢上方小程...

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

10-18

总的来说，微信小程序的`scroll-view`组件提供了丰富的滚动功能，但同时在处理滚动穿透和阻止滚动时需要开发者灵活运用技巧。随着微信小程序的发展，相信会有更多便捷的方式来处理此类交互问题。

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

在微信小程序开发中，滚动穿透（Scroll穿透）是指在使用fixed布局时，当弹出的蒙层（如对话框、遮罩层）覆盖在页面上时，用户在滑动蒙层的同时，会意外地带动页面底层内容一同滚动，导致用户体验下降。这个问题对于...

小程序遮罩层下面内容会滚动的事件穿透问题

x_Yanger的博客

11-05

1226

我做了一个底部滑出的效果，但是发现遮罩层下面的内容（红框框圈住的部分）也会跟着滚动。阻止冒泡也没有解决问题。首先判断弹窗弹起时给遮罩层下面的内容加上一个class。给它一个固定的高度，并加上overflow:hidden;就可以解决问题啦！附上重要代码 <view **class="{{hideModal?'sc':'sc1'}}"**> /*css部分*/ .sc { wi...

微信小程序全屏遮罩层代码

08-11

微信小程序全屏遮罩层代码。代码简洁，适合定制开发。

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

12-13

Mask-Scroll > 原码地址 * 蒙层防穿透问题 > 蒙层穿透就是，当你用fixed 布局让蒙层显示的时候，手指滑动屏幕会出现底部内容也滑动的现象. 如图：当蒙层出现的时候，你滚动屏幕，底部内容也一起跟着滚动。这就是蒙层穿透，也可以叫 ‘滚动穿透’. 当然出现这种情况，用户体验当然是不好的了。所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动狗头…) ## 解决方案这种要分情况，当蒙层没有滚动条的时候。当蒙层出现滚动条的时候 1. 当弹窗没有滚动条的时候。直接监听 catch:touchmove 方法，然后直接返回就可以了。代码可以去看f

微信小程序开发 遮罩层弹出框

04-03

微信小程序开发遮罩层弹出框的实现，简单实现，点击弹出遮罩，类似弹出框

1.解决小程序遮罩层遮住页面后滚动穿透问题

qq_43544841的博客

08-20

8548

小程序遮罩层遮住页面后滚动穿透问题分为两种情况： 1.蒙层mask没有滚动事件的情况可以在mask这个view上直接添加事件catchtouchmove="ture"来防止滚动或者写一个方法也可以代码如下： <view class="mask" wx:if="{{showModelcontact}}" catchtouchmove="prevent"></view>  prevent:function(){} 2.如果

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

qinnzheng

09-16

5305

小程序穿透

解决小程序的遮罩层滚动穿透

ivneptune的博客

12-04

590

遮罩层滚动穿透分为两种情况： 1.如果弹出层没有滚动事件，就直接在蒙板上加catchtouchmove="preventTouchMove" preventTouchMove:function(){}; 示例代码： <view class="mask" catchtouchmove="preventTouchMove"> 我是遮罩层 </view> 2.如果弹出层有滚动事件，那么在弹出层出现的时候给底部的containerView加上一个class 消失的时候.

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

weixin_43691337的博客

06-22

285

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

微信小程序修复蒙层滚动穿透问题全攻略

"微信小程序中存在一个常见的用户体验问题，即所谓的‘滚动穿透’或‘蒙层穿透’。这个问题指的是在使用fixed布局显示蒙层（如弹窗）时，用户滚动屏幕，不仅蒙层会滚动，底部的内容也会跟随滚动。这显然对用户体验...

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

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