Uni-app实现表格数据自动滚动(无限滚动)

汪汪队出击

已于 2022-12-07 09:15:06 修改

阅读量8.7k

点赞数 7

分类专栏： uni-app js 文章标签： uni-app 前端 html

于 2022-11-28 17:40:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_58671311/article/details/128083940

版权

本文介绍了如何在uniapp中实现表格数据的无限滚动效果，不使用删除数组首条数据再添加到尾部的方法。通过使用view和scroll-view结合flex布局，实现了表头固定，表体数据滚动。代码示例详细展示了模板、样式和方法，适用于需要自定义滚动效果的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：实现表格数据自动（无限）滚动（排除使用删除数组第一条数据添加到最后面的方法）

uniapp自带的table组件和插件市场中的插件都不能使用（因为uniapp无法操作原生DOM元素），因此，实现表头固定，表体数据滚动就只能使用view加上scroll-view来实现。使用flex布局加上view来实现表格，用scroll-view将需要滚动的数据包裹起来。话不多说直接贴代码（包括模板，样式，方法），可CV直接使用。

模板中的样式是动态绑定的样式，可根据自己需求修改（可以直接删除，不影响表格的使用）

效果和下面这篇文章中的视频一样：Vue Element table表格实现表格数据动态滚动（无限滚动）_汪汪队出击的博客-优快云博客_vue table数据滚动

  <view
    class="table"
    ref="firstTable"
    :style="{ width: firstTableWidth + 'px', height: firstTableHeight + 'px' }"
  >
    <view class="tr bg-w" :sty

最低0.47元/天解锁文章