まずスクロールペネトレーションとは何かについて説明しましょう。長いリストがあり、上下にスクロールしてさらに多くのコンテンツを表示できるとします。削除ボタンをクリックすると、確認ボックスが表示されます。ページを上下にスライドすると、以下に示すように、ポップアップ ボックスの下のリストの内容は引き続き上下にスクロールできることがわかります。
ビデオ_2022-12-02_111109
この種のエクスペリエンス効果はあまり良くありません。ポップアップ ボックスが表示されると、一番下のリスト ページがスクロールできなくなるのは当然です。この問題を解決するには、実際には次のコードを追加するのが非常に簡単です。対応するページ
:**wxml文件的首行**
<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta page-style="{
{ show ? 'overflow: hidden;' : '' }}" />
ブレットボックスが表示されている場合は show を true に設定するとスクロールの侵入を禁止します ブレットボックスが閉じている場合は show を false に設定するとページのスクロールが可能になります
Page({
data: {
show: false
},
// 弹框打开禁止页面滚动穿透
handleDialogOpen() {
this.setData({
show: true
})
},
// 弹框关闭允许页面滚动
handleDialogClose() {
this.setData({
show: false
})
}
})
O了,就这么点代码,亲身试验有效!如果能解决你的问题还望点个赞哦,祝你生活愉快!