实现无限滚动效果Vue

看了小野森森老师的视频后记录一下。

?

1 2 3 4 5

<div class="container">    <ul class="data-scroll" :style="{ transform: `translate3d(0px, ${- scroll.scrollTop}px, 0px)` }">      <li class="data-item" :ref="el=>dataItem[i]=el" v-for="(item, i) in scroll.dataOrigin" :key="i">{{ item }}</li>    </ul> </div>

　　

由于是用vue来实现，这里对数据进行修改。原生可以直接操作dom来实现。

这是一个上下滚动的列表，可以向上或向下滚动。这里设置一个reverse属性来控制，如果要做成通用组件可以使用props来接收，我直接定义成了普通变量。

实现功能前需要对逻辑进行梳理，先对向下说明，我的数组有1-9的数，溢出我放置的盒子。开始滚动前先给数组添加最后一项，

 

 

 当加入项在盒子中完全出现时，重置列表y轴滚动的top，并删除数组中最后一项和在头部添加数组最后一项。