微信小程序modal解决滚动穿透

765 阅读1分钟

1. 微信小程序Modal层内容不产生滚动情况

给modal最外层元素添加:catchtouchmove="{{true}}" 禁止滚动-----适用于modal内容不会产生滚动情况

2. 微信小程序内容会产生滚动情况

  1. 给mask添加属性:catchtouchmove="{{true}}"
  2. 给modal中content层添加:catchtouchmove="{{ isNoScroll }}", 默认为false, 允许页面滚动, content页面超出内容使用scroll-view标签,添加属性及方法
<scroll-view 
	scroll-y 
	bindscrolltoupper="bindscrolltoupper" // 滚动到顶部/左边事件
	bindscrolltolower="bindscrolltolower" // 滚动到底部/右边事件
	bindscroll="bindscroll" // 滚动事件
>
<scroll-view>
    
data: {
	isNoScroll: false
},
  
bindscrolltoupper(e) {
  this.setData({
    isNoScroll: true
  })
},
bindscrolltolower(e) {
  this.setData({
    isNoScroll: true
  })
},
bindscroll(e) {
  if(this.data.isScroll) {
    this.setData({
      isNoScroll: false
    })
  }
}