如何做小程序直播_小程序显示弹窗时禁止下层的

小程序显示弹窗时禁止下层的内容滚动实现方法       这篇文章主要介绍了小程序显示弹窗时禁止下层的内容滚动实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
view class="indexPage {{proInfoWindow 'indexFixed':''}}" -----------此处为整个页面的结构内容 button catchTap="_proInfoWindowShow" 点击显示弹窗 /button /view // 当proInfoWindow为true的时候显示弹窗 view wx:if="{{proInfoWindow}}" 此处为弹窗内容 /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 

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。