Let’s first describe what scrolling penetration is. Suppose there is a long list, and you can scroll up and down to view more content. If we click a delete button, a confirmation box will pop up. If we slide the page up and down, it will It is found that the content of the list under the pop-up box can still be scrolled up and down, as shown below:
Video_2022-12-02_111109
This kind of experience effect is not very good. It stands to reason that when the pop-up box is displayed, the bottom list page can no longer be scrolled. To solve this problem, it is actually very easy to add the following code to the corresponding page
:**wxml文件的首行**
<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta page-style="{
{ show ? 'overflow: hidden;' : '' }}" />
When the bullet box is displayed, set show to true to prohibit scrolling penetration. When the bullet box is closed, set show to false, and the page can be scrolled
Page({
data: {
show: false
},
// 弹框打开禁止页面滚动穿透
handleDialogOpen() {
this.setData({
show: true
})
}，
// 弹框关闭允许页面滚动
handleDialogClose() {
this.setData({
show: false
})
}
})
O了，就这么点代码，亲身试验有效！如果能解决你的问题还望点个赞哦，祝你生活愉快！