小程序自定义遮罩，防止页面穿透滚动

最新推荐文章于 2021-08-21 10:46:15 发布

diaoyi6909

最新推荐文章于 2021-08-21 10:46:15 发布

阅读量444

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guaguaerhao/p/8575385.html

版权

小程序自定义遮罩，但是页面过长的时候，会发生页面穿透滚动。这样体验不好。

可以根据遮罩的显示隐藏，添加禁止页面滚动的class

转载于:https://www.cnblogs.com/guaguaerhao/p/8575385.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diaoyi6909

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序解决自定义弹出层滑动时，下层页面滚动问题

厦门在乎科技

06-16

2968

弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。场景一：弹窗内无滚动内容可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。此种方式会阻止弹窗内内容的滚动。场景二：弹窗内有滚动内容在弹窗外层根元素动态添加一个no-scroll样式，

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

Syleapn的博客

03-13

3万+

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

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

小程序css实现遮罩弹出层

01-20

小程序中用css实现遮罩弹出层

小程序防止遮罩层穿透

DAASD1212的博客

06-20

265

　　最近弄小程序遮罩层穿透问题，网上好多资源设置catchtouchmove="preventD"即可，本人测试后好像还是不行，然后就找了其他方法，测试有效。 1、js ，data内初始化状态标识 showModalStatus: false 2、在相应的view 上加上判断代码 class="{{showModalStatus?'C_scroll':''}}" ...

小程序阻止遮罩层下的页面滚动

AndrewNeo

09-18

7888

注意：这是分情况的，第一种就是弹出层里没有滚动事件，没有使用sroll-view标签制作的页面；另一种情况就是与之相反，就是使用的scroll-view标签，这种情况使用catchtouchmove事件阻止冒泡是不起作用的，只能使用css设置的这种方法。 ...

移动端开发遮罩层（弹窗）防止滚动穿透解决方案

欢迎来到☆槿畔☆的博客

02-13

3万+

在移动端页面开发中，经常会去封装一个遮罩层（全屏弹窗），遮罩层（全屏弹窗），遮罩层（全屏弹窗）的组件，但是如果是固定定位的position：fixed；在弹出的时候会遇到一些小坑，之前搜索了一下，网上的博客也好评论也罢，总是有点缺陷或者累赘代码太多。就比如今天的主题，如何防止遮罩层（全屏弹窗）下方body内容继续滚动呢？移动端开发遮罩层（弹窗）防止滚动穿透完美解决方案首先，pc的肯定直接就...

UNIAPP----让微信小程序内容不被胶囊遮挡，app自带状态栏，禁止沉浸式显示

weixin_44126737的博客

08-21

7873

最近写的项目，UI给的图，内容距离顶部有预留的状态栏高度，然后使用view做导航栏发现微信小程序被胶囊遮挡，app滑动有沉浸式显示，影响客户体验。解决方法： uniapp项目中，在pages.json文件里，globalStyle，注释掉"navigationStyle": "custom" 目的是：不隐藏原生状态栏，这样小程序内容就放在了胶囊下面微信小程序这边解决了，然后看app 由于uniapp自动开启沉浸式状态栏，就是状态栏透明或者说跟随软件导航栏颜色动态改变自身颜色。有时候..

微信小程序自定义遮罩层 底下还能滚动和点击

最新发布

12-26

微信小程序的自定义遮罩层通常是通过`cover-view`组件来实现的，它可以在页面上覆盖其他内容，并提供一定的交互效果。如果你想让这个遮罩层在下面仍然允许部分区域滚动和点击，可以采取以下策略： 1. **设置z-index...

微信小程序自定义弹窗wcPop插件

10-17

6. **防止遮罩层穿透问题**：在最外层的view中添加`catchtouchmove="preventTouchMove"`属性，可以解决遮罩层下页面仍然可滚动的问题，提供更好的用户体验。 7. **仿微信样式**：wcPop还提供了仿微信Android和iOS...

微信小程序----------------------自定义遮罩层

m0_47230916的博客

10-15

669

本文转自：微信小程序中遮罩层的实现 uni-app自定义弹窗，底部页面触摸穿透问题解决方案（精华）移动端开发遮罩层（弹窗）防止滚动穿透完美解决方案先把自己用到的方法记录下来 wxml代码 <view class="wrap">   <

微信小程序自定义全屏遮罩

LLL_liuhui的博客

10-10

1万+

效果如下: 1、wxml <view class='' bindtap='showMask'>显示遮罩</view> <view class="mask" hidden="{{flag}}"> <view class="maskContent"> <view> <

微信小程序 - 解决自定义添加遮罩层，底部页面仍滚动

idomyway的博客

07-23

3890

前言底部的页面有滚动条，在自定义组件创建遮罩层时，底部页面仍然会滑动解决方法：为了防止事件冒泡，在遮罩层容器内设置 // 小程序 catchtouchmove="true" // mpvue :catchtouchmove="true" 开发者工...

小程序弹出遮罩层 禁止背景页面滚动

一个抠得儿

03-20

3372

因为弹出层也有滚动模块，不能使用catchtouchmove 最好的办法可以用两个scroll-view 背景层用scroll-view，上拉加载的时候检测scroll-view的事件进行加载弹出层也用scroll-view，这样互不干扰，也比较符合规范。 scroll-view的具体使用方法：传送门 ...

【小程序】解决小程序遮罩层滑动事件的穿透问题

qing_小诺的博客

01-08

1万+

1、问题描述：滑动自定义的遮罩层，会出现滚动穿透的问题，如下图，即遮罩层下面的列表页面依旧可以滚动。 2、解决办法：分为两种情况：情况1：【遮罩层没有滚动事件】直接在遮罩层的父节点上添加catchtouchmove="preventTouchMove"属性，例如： <view class="mask" catchtouchmove="preventTouchMove"&...

【微信小程序】阻止遮罩层下的页面滚动

一出好剧

12-07

2727

微信小程序 阻止遮罩层下页面滚动

【微信小程序】蒙层实现代码及阻止蒙层下方页面滚动

weixin_42137744的博客

10-26

1116

WXML: <view class="mask" catchtouchmove="preventTouchMove" hidden="{{hid_mengceng}}"></view> WXSS: .mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; bac...

[微信小程序] 弹出遮罩层后禁止背景层滚动的办法

我的米饭

12-15

1726

先定义一个overflow:hidden的全局样式，然后在点击出现遮罩层之后让最底层的使用这个样式即可，class上可以绑定一个变量，动态赋值样式的名称，例如： app.wxss 代码片段 .disableScroll { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; overflow: hidden; } index.wxml 代码片段 <view class="{{ scrollStyle

小程序遮罩层禁止屏幕滚动

一个抠得儿

03-20

1687

小程序开发的时候遮罩层出现后，后面的背景依然可以滚动，加入在遮罩层加入catchtouchmove="ture"就可以了

小程序 自定义弹窗后禁止屏幕滚动（滚动穿透）