实现无限滚动效果Vue

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

 <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，并删除数组中最后一项和在头部添加数组最后一项。

 

 

 

 

标签：Vue,滚动,实现,列表,item,无限,数组,一项
来源： https://www.cnblogs.com/bobkang/p/15851295.html