小程序自带的弹窗比较简单,在实际项目中,我们往往需要自定义弹窗以满足较为复杂的业务需求。弹窗时底层内容一般都是不滚动,我们可以用下面几种方法实现:
1、catchtouchmove=“true”
可以实现弹框背景不滚动,但是也会导致弹框自身无法滚动,如果你的弹窗本身是不需要滚动的,用这个方法是极佳的。
<view class="modal" catchtouchmove="true"> <view class="shade"></view> <view class="content"></view> </view>
2、底部内容区使用scroll-view
设置垂直滚动,并将scroll-view的高度设置为屏幕高度,这样就可以实现弹窗自身内容滚动时,而底层内容不滚动。
<scroll-view class="container" scroll-y style="height:{{windowHeight}}px"> 底部内容 </scroll-view> <view class="modal"></view>
===================================
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { /*获取屏幕高度*/ this.setData({ windowHeight: wx.getSystemInfoSync().windowHeight }) },
3、固定布局/绝对定位
.forbidScroll { position: fixed/absolute; left: 0; right: 0; top: 0; bottom: 0; }
tip:有尝试过为wxml最外层元素添加overflow: hidden来实现禁止滚动,然而发现只有为page元素添加该样式才起作用,而在js中又无法动态为page添加样式。