解决小程序滚动穿透问题

2023-04-11  本文已影响0人  hao_developer

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

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
    })
 }
})
上一篇 下一篇

猜你喜欢

热点阅读