实现无限滚动效果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的数,溢出我放置的盒子。开始滚动前先给数组添加最后一项,

实现无限滚动效果Vue

 

 

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

实现无限滚动效果Vue

 

 

 实现无限滚动效果Vue

 

上一篇:Qt6 QML Book/图形效果/粒子绘制器


下一篇:scrapy之请求传参、图片爬取与中间件