小程序显示弹窗时禁止下层的内容滚动的两种方法介绍

本篇文章给大家带来的内容是关于小程序显示弹窗时禁止下层的内容滚动的两种方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

①  第一种方式
利用position:fixed.  禁止页面滚动.

一. 页面结构html

 view >
二. CSS部分
//添加一个类名, 把弹窗的下层内容定位为fixed.实现禁止滚动的效果
.indexFixed{
 position: fixed;
 top:0;//top:0可不写,否则显示弹窗的同时会使底层滚动到顶部.
 left:0;
 bottom:0;
 right:0;
}
三. JS部分
Page({
 data: {
proInfoWindow:false,//控制弹窗是否显示 
// 点击弹窗事件, 设置proInfoWindow为true, 显示弹窗.
// 设置proInfoWindow为true的同时, 给页面添加了一个class名为indexFixed的类.显示弹窗时下层就禁止滚动,关掉弹窗时就可以滚动.
_proInfoWindowShow(){
 this.setData({
 proInfoWindow:true
})
②第二种方式
用 catchtouchmove= return 
//此处为弹窗内容
 view catchtouchmove= return //外层加 catchtouchmove= return 仅触摸背景区域时不穿透底部.
 view catchtouchmove= return /view //在每个小的区域内加 catchtouchmove= return 
 view // 有需要滚动的列表区域位置不要加 catchtouchmove= return , 否则列表无法滚动
 view 滚动列表1 /view 
 view 滚动列表2 /view 
 view 滚动列表3 /view 
 view 滚动列表4 /view 
 /view 
 /view 
以上就是小程序显示弹窗时禁止下层的内容滚动的两种方法介绍的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。