uni-app list 设置:pagingEnabled="true"，快速连续滑动两页@scroll返回的偏移量不正确，并且之后一页一页的滑动偏移量contentOffset也是不对的

uni-app list 设置:pagingEnabled=“true”，快速连续滑动两页@scroll返回的偏移量不正确，并且之后一页一页的滑动偏移量contentOffset也是不对的

开发环境 版本号 项目创建方式
Mac mac os big sur 11.0.1 HBuilderX 
## 示例代码：

```html
<view class="container" :style="windowH">  
    <list ref="list" :pagingEnabled="true" :offset-accuracy="screenStyle.height" :show-scrollbar="false" [@scroll](/user/scroll)="onScrollChange" >  
        <cell v-for="(item, index) in items" :key="index">  
            <view class="list-item" :style="windowH">  
            </view>  
        </cell>  
    </list>  
</view>

操作步骤：

  • 快速连续滑动两页

预期结果：

  • e.contentOffset为offset-accuracy的整数倍

实际结果：

  • 会出现偏差

bug描述：

list组件 设置:pagingEnabled=“true”，快速连续滑动两页@scroll返回的偏移量不正确，并且之后一页一页的滑动偏移量contentOffset也是不对的


更多关于uni-app list 设置:pagingEnabled="true"，快速连续滑动两页@scroll返回的偏移量不正确，并且之后一页一页的滑动偏移量contentOffset也是不对的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

这是demo

更多关于uni-app list 设置:pagingEnabled="true"，快速连续滑动两页@scroll返回的偏移量不正确，并且之后一页一页的滑动偏移量contentOffset也是不对的的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是这样的 scroll 事件不是滑动1像素就触发一次，快速滑动可能是5像素或10像素等等，不是一个固定值，并且返回的值精度和 offset-accuracy 成反比，offset-accuracy 设置的越小精度越高；我看了你的demo，你应该使用 @scrollend 事件就可以获取你想要的效果了

受教了，还有这个事件。

这是一个已知的 list 组件在启用分页模式（pagingEnabled="true"）时的滚动事件同步问题。当快速滑动时，@scroll 事件返回的 contentOffset 可能无法准确反映分页后的最终位置，导致后续计算出现累积偏差。

原因分析： pagingEnabled 属性会强制滚动视图按页（即 offset-accuracy 的整倍数）停靠。但在快速连续滑动时，@scroll 事件可能：

  1. 在滚动动画尚未结束时触发，返回的是动画过程中的中间值。
  2. 分页校正逻辑与事件触发的时序问题，导致 contentOffset 与最终停靠位置不一致。

临时解决方案： 建议通过以下方式规避：

  1. 使用 @scrollend 事件替代：监听滚动完全结束的事件，此时偏移量通常是校正后的正确值。
  2. 手动校正偏移量：在 @scroll 事件中，根据 offset-accuracy 手动计算并应用正确的分页偏移量。
  3. 避免依赖实时偏移量：如需记录当前页码，可通过滚动位置与页高的比值动态计算，而非直接使用 contentOffset。

示例代码调整：

<list 
    ref="list" 
    :pagingEnabled="true" 
    :offset-accuracy="pageHeight" 
    @scrollend="onScrollEnd"
>
    <!-- cell内容 -->
</list>

onScrollEnd(e) {
    // e.contentOffset 此时应为校正后的准确值
    const currentPage = Math.round(e.contentOffset.y / this.pageHeight);
}
回到顶部