uni-app scroll-view组件不能逐条向下滑动

uni-app scroll-view组件不能逐条向下滑动

操作步骤：

  • 点开后，向下滑动一下滚轮

预期结果：

  • 滑动一次滚轮，数据向下滑动一条，滑动多下，数据滑动多条

实际结果：

  • 向下滑动一下，向下滑动多条数据

bug描述：

  • 使用scroll-view组件时，向下滑动总是一页一页的滑动，无法逐条向下滑动，代码、效果如图
开发环境 版本号 项目创建方式
Windows 19043.1165 HBuilderX
HBuilderX 3.2.6
浏览器平台 浏览器版本
------------------- -----------
Chrome 93.0.4577.82

Image 1 Image 2 Image 3


更多关于uni-app scroll-view组件不能逐条向下滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app scroll-view组件不能逐条向下滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于 scroll-view 组件的默认滚动行为导致的。scroll-view 在浏览器环境中默认使用原生滚动，其滚动距离由系统控制，无法精确控制每次滚动的行数。

解决方案：

  1. 使用 scroll-into-view 属性
    通过动态计算并设置 scroll-into-view 的值，可以精确控制滚动到指定元素。例如：
    <scroll-view :scroll-into-view="currentId">
  <view v-for="item in list" :id="'item-' + item.id">{{ item.text }}</view>
</scroll-view>
回到顶部