看了小野森森老师的视频后记录一下。
<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,并删除数组中最后一项和在头部添加数组最后一项。