解决scroll-view滑动穿透问题
时间: 2023-06-23 12:09:46 浏览: 73
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的滑动事件与子元素的点击事件冲突,从而解决滑动穿透问题。
相关问题
微信小程序scroll-view滑动穿透问题,怎么解决
微信小程序中,scroll-view 组件默认会阻止页面上其他元素的滑动事件,这可以通过设置 `catchtouchmove` 属性来解决。
具体做法如下:
1. 在 scroll-view 组件上添加 `catchtouchmove="true"` 属性,如下所示:
```html
<scroll-view catchtouchmove="true">
<!-- scroll-view 内容 -->
</scroll-view>
```
2. 在页面的 `onLoad` 或 `onReady` 生命周期中,获取 scroll-view 组件的高度和宽度,然后在页面上添加一个与 scroll-view 同样大小的透明的 view,并将其 zIndex 设置为比 scroll-view 更高的数值,这样就可以让页面上的其他元素在透明的 view 上进行滑动了。代码如下:
```javascript
onLoad: function () {
var that = this;
wx.createSelectorQuery().select('#scrollview').boundingClientRect(function (rect) {
that.setData({
scrollHeight: rect.height
});
}).exec();
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight
});
}
});
},
```
```html
<!-- 添加一个与 scroll-view 大小相同的透明 view -->
<view class="transparent-view" style="height: {{windowHeight - scrollHeight}}px; z-index: 1;"></view>
<scroll-view id="scrollview" catchtouchmove="true">
<!-- scroll-view 内容 -->
</scroll-view>
```
3. 在页面的 CSS 中,让透明的 view 不显示出来,代码如下:
```css
.transparent-view {
background-color: transparent;
}
```
通过以上步骤,就可以解决微信小程序中 scroll-view 组件滑动穿透的问题了。
scroll-view滑动条 隐藏
要隐藏 scroll-view 的滑动条,可以在 scroll-view 组件上设置 `scrollbar` 属性为 `false`。
例如,在 WXML 文件中:
```html
<scroll-view class="scroll-view" scrollbar="{{false}}">
<!-- scroll-view 内容 -->
</scroll-view>
```
在 CSS 文件中,可以通过 `::-webkit-scrollbar` 伪元素来控制滚动条的样式:
```css
.scroll-view::-webkit-scrollbar {
display: none;
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)