前言
有需求需要用到这个大腿们设计的无缝滚动插件（vue3-seamless-scroll），效果不错，记录一下使用过程。本插件不需要全局引用，只需要局部引用到页面中即可，主要有三个步骤，分别是引入、注册、使用。
一、文档地址
https://github.com/xfy520/vue3-seamless-scroll
https://gitee.com/longxinziyan/vue3-seamless-scroll
二、示例代码
（1）/src/views/Example/SeamlessScroll/index.vue
<template>
<vue3-seamless-scroll
class="v-s-s"
:list="list"
:step="1"
:hover="true"
>
<div class="v-s-s_item" v-for="(item, index) in list" :key="index">
<span>{
{ item.title }}</span>
<span>{
{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</template>
<script>
import {
ref, reactive, toRefs, onMounted } from 'vue'
import {
Vue3SeamlessScroll } from 'vue3-seamless-scroll'
export default {
components: {
Vue3SeamlessScroll,
},
setup() {
const state = reactive({
list: [
{
title: '无缝滚动第一行无缝滚动第一行', date: '2023-5-10 18:09:22' },
{
title: '无缝滚动第二行无缝滚动第二行', date: '2023-5-10 18:09:22' },
{
title: '无缝滚动第三行无缝滚动第三行', date: '2023-5-10 18:09:22' },
{
title: '无缝滚动第四行无缝滚动第四行', date: '2023-5-10 18:09:22' },
{
title: '无缝滚动第五行无缝滚动第五行', date: '2023-5-10 18:09:22' },
{
title: '无缝滚动第六行无缝滚动第六行', date: '2023-5-10 18:09:22' },
{
title: '无缝滚动第七行无缝滚动第七行', date: '2023-5-10 18:09:22' },
{
title: '无缝滚动第八行无缝滚动第八行', date: '2023-5-10 18:09:22' },
{
title: '无缝滚动第九行无缝滚动第九行', date: '2023-5-10 18:09:22' },
],
});
return {
...toRefs(state),
};
},
};
</script>
<style lang="less" scoped>
.v-s-s {
height: 200px;
width: 500px;
margin: 100px auto;
overflow: hidden;
font-size: 13px;
.v-s-s_item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px 0;
}
}
</style>
三、运行效果
