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

在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。面对这个bug，我们可以用下面几种方法实现：

方法1：catchtouchmove=“true”

可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。
如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。
ps：开发工具测试无效，真机上有效

<!-- 页面 -->
<view class="page"><button bindtap="showAction">点击出现弹框</button>
</view><!-- 弹框 -->
<view catchtouchmove="true"><view class="mask" wx:if="{{popup}}"></view><view class="half-screen-dialog {{popup?'half-screen-dialog_show':''}}"></view>
</view>

.page {width: 100%;height: 20000rpx;background-color: pink;
}

方法2：使用scroll-view包裹底部内容区

<!-- 页面 -->
<scroll-view class="page" scroll-y="{{true}}" scroll-x="{{false}}" enhanced="{{true}}" bounces="{{false}}"><view style="height: 3000rpx;background: green;"><button bindtap="showAction">点击出现弹框</button></view>
</scroll-view><!-- 弹框 -->
<view><view class="mask" wx:if="{{popup}}"></view><view class="half-screen-dialog {{popup?'half-screen-dialog_show':''}}"><view style="height: 3000rpx;background: red;"></view></view>
</view>

.page {position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow-y: auto;
}

方法3：弹框出现的时候，将底部背景页面的高度设置为100vh

<!-- 页面 -->
<view class="{{popup ? 'page-overflow-hidden' : ''}}"><view style="height: 3000rpx;background: green;"><button bindtap="showAction">点击出现弹框</button></view>
</view><!-- 弹框 -->
<view><view class="mask" wx:if="{{popup}}"></view><view class="half-screen-dialog {{popup?'half-screen-dialog_show':''}}"><view style="height: 3000rpx;background: red;"></view></view>
</view>

.page-overflow-hidden {height: 100vh;overflow: hidden;
}

相同的弹框样式如下：

.mask {position: fixed;z-index: 1000;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);
}.half-screen-dialog {position: fixed;left: 0;right: 0;bottom: 0;height: 75%;z-index: 5000;line-height: 1.4;background-color: #FFFFFF;border-top-left-radius: 24rpx;border-top-right-radius: 24rpx;overflow-y: auto;transition: transform .3s;transform: translateY(100%);
}.half-screen-dialog_show {transform: translateY(0%);
}

相同的js如下：

Page({data: {popup: false},showAction() {this.setData({popup: true});},
})

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

微信小程序 - 解决自定义添加遮罩层，底部页面仍滚动
前言底部的页面有滚动条,在自定义组件创建遮罩层时,底部页面仍然会滑动解决方法: 为了防止事件冒泡,在遮罩层容器内设置 // 小程序 catchtouchmove="true" ...
微信小程序禁止弹框下面的内容滑动弹窗禁止底部内容滚动
我们需要解决的问题:当弹框显示的时候,弹框下面的内容不能滚动小程序的弹框特别多,像下面这样,弹框的底部是一个可以下拉的页面,但是当弹框出现的时候,需要禁止底部的滚动,那么怎么做呢? 解决方案: 给v ...
[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bi ...
微信小程序底部弹框 showActionSheet
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
微信小程序自定义弹框组件
话不多说直接上代码目录 1.wxml 2.js 3.wxss 4.json 5.效果展示(具体内容可以自定义) 1.wxml <!--pages/components/confirmBox/c ...
微信小程序自定义弹框+生成二维码功能
最近在做小程序的功能,需求是弹框生成二维码功能,所以根据需求自定义了一个弹框组件,后续其他地方也可以用到. 最后效果图如下 dialog部分 <!--components/dialog/dial ...
微信小程序之弹框modal
官方文档 <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮&q ...
微信小程序日历弹框组件
参考文章:https://blogai.cn/posts/46 calendar.json {"usingComponents": {},"disableScroll&q ...
android 遮罩使底层无法点击,小程序防止点击遮罩层后遮罩层下面也反应（有点击事件）...
小程序防止点击遮罩层后遮罩层下面也反应(有点击事件) 发布时间:2018-08-11 00:02, 浏览次数:1008 最近在做自定义弹窗,不免会使用到遮罩层或者说蒙层. 但是关键是,有遮罩层后,再点 ...

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

方法1：catchtouchmove=“true”

方法2：使用scroll-view包裹底部内容区

方法3：弹框出现的时候，将底部背景页面的高度设置为100vh

相同的弹框样式如下：

相同的js如下：

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

最新文章

热门文章