我們?cè)陂_發(fā)過程中總會(huì)有開發(fā)彈窗的需求菇夸，在彈窗彈起來的時(shí)候悼院，底部的內(nèi)容卻可以滾動(dòng)淮逊，最開始我們使用catchtouchmove解決了侠坎，但是在特殊布局的情況下還是會(huì)導(dǎo)致滾動(dòng)穿透蚁趁。今天分享一個(gè)永久解決該問題的方法。
就不賣關(guān)子了实胸，我攤牌了他嫡。
使用官方的page-meta組件，很多童鞋可能還不知道這個(gè)是干嘛的庐完，這里貼下官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html
通過該組件我們可以直接操作Page組件 钢属，我們給它的wxss樣式overflow動(dòng)態(tài)設(shè)置hiddenorvisible 就可以控制整個(gè)頁面是否可以進(jìn)行滾動(dòng)。
image.png
示例代碼：
<page-meta page-style="overflow: {{visible ? 'hidden' : 'visible'}}" />
<button class="button" bindtap="handleClick">點(diǎn)我彈出彈窗</button>
<!-- 模擬頁面滾動(dòng) -->
<view wx:for="{{300}}" wx:key="index">{{item}}</view>
<!-- 分享彈窗 -->
<view class="dialog-wrap {{visible ? 'active' : ''}}">
<view class="dialog-back {{visible ? 'active' : ''}}"></view>
<view class="share-box-container {{visible ? 'active' : ''}}">
<view class="share-content">
<view class="share-box">
<button class="share-item" hover-class="none" open-type="share" bindtap="handleClose">
<image src="https://qiniu-image.qtshe.com/20210409_wechat.png" mode="widthFix" />
</button>
<view class="share-item" bindtap="handleShareTimeLine">
<image src="https://qiniu-image.qtshe.com/20210409_moment.png" mode="widthFix" />
</view>
</view>
</view>
<image src="https://qiniu-image.qtshe.com/20210409close-btn.png" class="close-btn" bindtap="handleClick" />
</view>
</view>
控制彈窗顯隱藏：
const app = getApp()
Page({
data: {
visible: false
},
onLoad() {
},
handleClick() {
this.setData({
visible: !this.data.visible
})
}
})
wxss彈窗樣式太多门躯，這里就不貼淆党，放代碼片段里了。
兼容底部是scroll-view讶凉，以及彈窗內(nèi)的scroll-view都不會(huì)穿透影響底部的內(nèi)容染乌。
image.png
