小程序弹出层禁止列表滑动_小程序显示弹窗时禁止下层的内容滚动实现方法

小程序显示弹窗时禁止下层的内容滚动实现方法，具体如下

①  第一种方式

利用position:fixed.  禁止页面滚动.

一. 页面结构html

-----------此处为整个页面的结构内容

点击显示弹窗

// 当proinfowindow为true的时候显示弹窗

此处为弹窗内容

二. 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"

//此处为弹窗内容

//外层加 catchtouchmove="return"仅触摸背景区域时不穿透底部.

//在每个小的区域内加 catchtouchmove="return"

// 有需要滚动的列表区域位置不要加 catchtouchmove="return", 否则列表无法滚动

滚动列表1

滚动列表2

滚动列表3

滚动列表4

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

希望与广大网友互动？？

点此进行留言吧！