1. 微信小程序Modal层内容不产生滚动情况
给modal最外层元素添加:catchtouchmove="{{true}}" 禁止滚动-----适用于modal内容不会产生滚动情况
2. 微信小程序内容会产生滚动情况
- 给mask添加属性:catchtouchmove="{{true}}"
- 给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
})
}
}