解决scroll-view滑动穿透问题
时间: 2023-06-23 07:09:46 浏览: 210
解决微信小程序中的滚动穿透问题
5星 · 资源好评率100%
scroll-view滑动穿透问题通常是由于scroll-view的滑动事件与其中的子元素(如按钮)的点击事件冲突所致。解决方法如下:
1. 在scroll-view上添加一个ref属性,并在其上绑定一个touchmove事件,阻止冒泡和默认行为:
```javascript
<scroll-view ref="scrollView" @touchmove.prevent.stop>
```
2. 在需要防止穿透的子元素上,也添加一个touchmove事件,并阻止冒泡和默认行为:
```javascript
<button @touchmove.prevent.stop></button>
```
3. 在子元素的touchmove事件中,手动触发scroll-view的touchmove事件:
```javascript
this.$refs.scrollView.$el.dispatchEvent(new TouchEvent('touchmove', {cancelable: true, bubbles: true}));
```
这样就可以防止scroll-view的滑动事件与子元素的点击事件冲突,从而解决滑动穿透问题。
阅读全文