vue3-seamless-scroll无缝滚动组件使用

本文主要是介绍vue3-seamless-scroll无缝滚动组件使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue3.0 无缝滚动组件，支持Vite2.0，支持服务端打包

官网地址：https://github.com/xfy520/vue3-seamless-scroll

npm地址：vue3-seamless-scroll - npm

1.安装方式：

npm install vue3-seamless-scroll --save

yarn add vue3-seamless-scroll

<script src="https://unpkg.com/browse/vue3-seamless-scroll@1.0.2/dist/vue3-seamless-scroll.min.js"> </script>

2.使用方式

        全局注册：

import { createApp } from 'vue';
import App from './App.vue';
import vue3SeamlessScroll from "vue3-seamless-scroll";
const app = createApp(App);
app.use(vue3SeamlessScroll);
app.mount('#app');

        局部引用 ：

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

3.代码中使用：

<vue3-seamless-scroll:list="fineYarnList"class="scroll":limitScrollNum="scrollOptions.limitScrollNum":copyNum="scrollOptions.copyNum":step="scrollOptions.step":hover="scrollOptions.hover":direction="scrollOptions.direction"
><div>......</div>
</vue3-seamless-scroll><script lang="ts" setup>
const scrollOptions = ref({limitScrollNum: 15, //开启滚动的数据量，只有列表长度大于等于该值才会滚动step: 1, // 步进速度copyNum: computed(() => (fineYarnList.value.length >= 15 ? 1 : 0)), // 虚拟滚动列表拷贝的数量direction: "up" as "up" | "down" | "left" | "right" | undefined, // 控制滚动方向，可选值up，down，left，righthover: true // 鼠标悬停时，是否停止滚动
});
<script>

4.参数说明：

key	description	default	type
list	无缝滚动列表数据，组件内部使用列表长度。		Array
v-model	通过v-model控制动画滚动与停止，默认开始滚动	true	Boolean
direction	控制滚动方向，可选值up，down，left，right	“up”	String
isWatch	开启数据更新监听	true	Boolean
hover	是否开启鼠标悬停	false	Boolean
count	动画循环次数，默认无限循环	“infinite”	Number
limitScrollNum	开启滚动的数据量，只有列表长度大于等于该值才会滚动	5	Number
step	步进速度	1	Number
singleHeight	单步运动停止的高度	0	Number
singleWidth	单步运动停止的宽度	0	Number
singleWaitTime	单步停止等待时间(默认值 1000ms)	1000	Number
isRemUnit	singleHeight and singleWidth 是否开启 rem 度量	true	Boolean
delay	动画延时时间	0	Number
ease	动画效果，可以传入贝塞尔曲线数值	“ease-in”	String | cubic-bezier
copyNum	拷贝列表次数，默认拷贝一次，当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果	1	Number
wheel	在开启鼠标悬停的情况下是否开启滚轮滚动，默认不开启	false	Boolean
singleLine	启用单行横向滚动	false	Boolean

这篇关于vue3-seamless-scroll无缝滚动组件使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---