温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

小程序如何显示弹窗时禁止下层的内容滚动

发布时间:2021-01-30 12:45:11 来源:亿速云 阅读:209 作者:小新 栏目:移动开发

小编给大家分享一下小程序如何显示弹窗时禁止下层的内容滚动,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

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

一. 页面结构html

<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>

以上是“小程序如何显示弹窗时禁止下层的内容滚动”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI