解决小程序滚动穿透问题

问题：弹出框显示了，结果还能够进行滑动

image.png

这样的体验效果并不是很好，按理来说当弹框显示的时候，底下的列表页面不能再滚动了，要解决这样的问题其实也很容易

解决方案

在对应页面的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
    })
 }
})