小程序自帶的彈窗比較簡(jiǎn)單，在實(shí)際項(xiàng)目中纯续，我們往往需要自定義彈窗以滿足較為復(fù)雜的業(yè)務(wù)需求蔬充。彈窗時(shí)底層內(nèi)容一般都是不滾動(dòng)，我們可以用下面幾種方法實(shí)現(xiàn)：
1笛匙、catchtouchmove="true"
可以實(shí)現(xiàn)彈框背景不滾動(dòng)侨把，但是也會(huì)導(dǎo)致彈框自身無法滾動(dòng)，如果你的彈窗本身是不需要滾動(dòng)的妹孙，用這個(gè)方法是極佳的秋柄。
<view class="modal" catchtouchmove="true">
<view class="shade"></view>
<view class="content"></view>
</view>
2、底部?jī)?nèi)容區(qū)使用scroll-view
設(shè)置垂直滾動(dòng)蠢正，并將scroll-view的高度設(shè)置為屏幕高度骇笔，這樣就可以實(shí)現(xiàn)彈窗自身內(nèi)容滾動(dòng)時(shí)，而底層內(nèi)容不滾動(dòng)嚣崭。
<scroll-view class="container" scroll-y style="height:{{windowHeight}}px">
底部?jī)?nèi)容
</scroll-view>
<view class="modal"></view>
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
/*獲取屏幕高度*/
this.setData({
windowHeight: wx.getSystemInfoSync().windowHeight
})
},
3笨触、固定布局/絕對(duì)定位
.forbidScroll {
position: fixed/absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
tip：有嘗試過為wxml最外層元素添加overflow: hidden來實(shí)現(xiàn)禁止?jié)L動(dòng)，然而發(fā)現(xiàn)只有為page元素添加該樣式才起作用雹舀，而在js中又無法動(dòng)態(tài)為page添加樣式芦劣，遂作罷。
