在vue3中实现无限向上滚动效果插件

一、安装vue3-seamless-scroll

npm install vue3-seamless-scroll

安装完毕如图

二、单个页面引用

<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
</script>

三、结构代码

/*** 
**step: 0.5, // 滚动速度（数值越大越快）
**limitMoveNum: 1, // 开始滚动的最小数据量（小于等于此值不滚动）
**direction: 1, // 滚动方向：0（向下）、1（向上）、2（向左）、3（向右）
**hoverStop: true, // 鼠标悬停是否停止滚动
**openWatch: true, // 数据更新时是否重新计算滚动
**visibleCount: 1, //1=无滚动条不滚动，有滚动条会滚动(**重要**只要设置为1根据盒子大小自动判断是否滚动)
**singleHeight: 0, // 单条数据高度（默认自动计算）
**singleWidth: 0, // 单条数据宽度（默认自动计算）
**waitTime: 1000, // 鼠标离开后重新滚动的延迟时间（ms）
***/
<div class="zlrw_body"><vue3-seamless-scrollv-if="zlrwObj.zlrList.length > 0":list="zlrwObj.zlrList":hover="true":limitScrollNum="3":visibleCount="1":openWatch="true":wheel="true"><!-- **重要**scroll_wrap的样式必须设置为height: auto;才能滚动 --><div class="scroll_wrap"><divclass="zlrw_part"v-for="(item, index) in zlrwObj.zlrList":key="item.id"><!-- 循环的数据条-star --><p>一条数据</p><!-- 循环的数据条-end --></div></div></vue3-seamless-scroll><div v-else class="empty">暂无数据</div>
</div>

**重点:**如果想切换数据的时候多条滚动和少条不滚动，需要在重新获取数据时, zlrwObj.zlrList=[]