uni-app 给view添加滚动条并绑定scroll事件，为什么在这个事件对象中获取不了滚动信息参数？

uni-app 给view添加滚动条并绑定scroll事件，为什么在这个事件对象中获取不了滚动信息参数？

示例代码：

<view class="vod-body">  
    <view class="vod-body--item" @scroll="scroll">  
        <view v-for="index in 500">{{index}}</view>  
    </view>  
</view>  

function scroll(d){  
    console.log(d);  
}  

.vod-body {  
    height: 360px;  
    overflow: hidden;  
}  

.vod-body--item {  
    height: 100%;  
    overflow: auto;  
    white-space: nowrap;  
}

操作步骤：

  • 在scroll回调函数中的事件对象获取不了滚动信息的参数

预期结果：

  • 希望在scroll事件回调函数中能获取到scrollLeft, scrollTop, scrollHeight, scrollWidth等等滚动信息

实际结果：

  • 在scroll回调函数中的事件对象获取不了滚动信息的参数

bug描述：

  • 我给view添加滚动条，绑定scroll事件，为什么在这个事件对象获取不了滚动信息参数？比如滚动距离，scrollHeight等等参数信息，在这个事件对象中的detail属性为一个空对象

| 信息类别         | 信息内容       |
|------------------|----------------|
| 产品分类         | uniapp/App     |
| PC开发环境       | Windows        |
| PC开发环境版本   | win10          |
| HBuilderX类型    | 正式           |
| HBuilderX版本    | 4.07           |
| 手机系统         | Android        |
| 手机系统版本     | Android 14     |
| 手机厂商         | 华为           |
| 手机机型         | mi8            |
| 页面类型         | vue            |
| vue版本          | vue2           |
| 打包方式         | 云端           |
| 项目创建方式     | HBuilderX      |

更多关于uni-app 给view添加滚动条并绑定scroll事件，为什么在这个事件对象中获取不了滚动信息参数？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

使用scroll-view 组件 <template>
<view>
<scroll-view scroll-y=“true” class=“vod-body” @scroll=“scroll”>
<view v-for="index in 500" :key="index">{{index}}</view>
</scroll-view>
</view>
</template>

<script> export default { methods: { scroll(e) { console.log(e) } } } </script> <style lang="scss" scoped> .vod-body { height: 360px; } </style>

更多关于uni-app 给view添加滚动条并绑定scroll事件，为什么在这个事件对象中获取不了滚动信息参数？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，如果你给 view 添加了滚动条并绑定了 scroll 事件，但在事件对象中无法获取到滚动信息参数，可能是因为以下几个原因：

1. view 组件的限制

view 组件本身并不是一个可滚动的容器，它默认是不支持滚动的。如果你想要实现滚动效果，通常需要使用 scroll-view 组件。

<scroll-view scroll-y="true" [@scroll](/user/scroll)="handleScroll">
  <!-- 内容 -->
</scroll-view>

在 scroll-view 中，scroll 事件会触发，并且事件对象中会包含滚动信息。

2. 事件对象的正确使用

当你使用 scroll-view 并绑定 scroll 事件时，事件对象中会包含 detail 属性，其中包含了滚动信息。你可以通过 event.detail.scrollTop 获取当前的滚动位置。

methods: {
  handleScroll(event) {
    console.log('当前滚动位置:', event.detail.scrollTop);
  }
}

3. view 组件的滚动实现

如果你坚持使用 view 组件并希望实现滚动效果，你可以通过 CSS 设置 overflow: auto 或 overflow: scroll，但这样并不会触发 scroll 事件。view 组件本身并不支持 scroll 事件。

.scrollable-view {
  overflow: auto;
  height: 200px;
}

<view class="scrollable-view">
  <!-- 内容 -->
</view>

在这种情况下，view 组件不会触发 scroll 事件，因此你无法获取滚动信息。

4. 检查事件绑定

确保你正确绑定了 scroll 事件，并且事件处理函数的名称与绑定的事件名一致。

<scroll-view scroll-y="true" [@scroll](/user/scroll)="handleScroll">
  <!-- 内容 -->
</scroll-view>

methods: {
  handleScroll(event) {
    console.log('当前滚动位置:', event.detail.scrollTop);
  }
}
回到顶部