标签：Vue 滚动 实现 列表 item 无限 数组 一项

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

 <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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。