vue3实现无缝滚动 列表滚动 vue3-seamlessscroll

vue3框架内使用无缝滚动，使用一个插件比较合适（gitee地址）：

vue3-seamless-scroll: Vue3.0 无缝滚动组件

具体更多配置请看：

组件配置 | vue3-scroll-seamless 

1. 安装：

npm install vue3-seamless-scroll --save

2. 使用：

我这里使用组件内引入：

//<script setup> 中组件引入
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';// template中使用组件// 注意：父级元素的大小和overflow: hidden是必须添加的
<div style="width: 500px; height: 400px; overflow: hidden;"><Vue3SeamlessScrollref="cScroll":list="list":limit-scroll-num="10"><ul><li></li></ul></Vue3SeamlessScroll>
</div>// 以上参数说明// list 就是我们需要滚动的数据，是一个数组。
// limit-scroll-num 就是数据长度大于这个数字，才能滚动

3.重置

通常情况下需要配合后台接口数据，使用滚动，滚动之后需要重置插件。

//********** 获取后台数据// 定义列表数据
const list = ref([]);// 定义滚动组件 就是我们上边在dom上定义的ref
const cScroll = ref();
getListData().then(res => {if (res.code == 200) {list.value = res.data ? res.data : [];// 重置组件nextTick(() => {// 注意这个重置方法是大写的R -> Reset,而不是小写的reset();// 很多教程写错了，这里就会报错cScroll.value.Reset();})}
})

4.内容高度超出才滚动

还有个需求是滚动内容全部都是文字，当文字超出才滚动，不超出不滚动。

// 1. 首先设置滚动数字为2
/*默认数据长度2，也就是说list的长度为2才会滚动，也就是默认不滚动。如果我们判断内容的高度大于容器的高度，我们会把这个值设置为1，也就可以滚动了
*/// 默认数字
const defaultLimitNum = ref(2);// 2. 然后获取文字容器的高度// 定义滚动组件 就是我们上边在dom上定义的ref
const cScroll = ref();
nextTick(() => {const scrollHeight = cScroll.value.scrollHeight;// 这里判断 大于容器高度，就可以设置为1，让他滚动// 假设容器高度为500pxdefaultLimitNum.value = scrollHeight > 500 ? 1 : 2;// 重置组件CScroll.value.Reset();})

最后，需要注意以下几点：

1. 父元素的“overflow：hidden”必须设置，不设置没有效果；

2. 每次更换数据，最好重置滚动组件（Reset）；