当前位置：首页 > article >正文

利用vue3SeamlessScroll简单实现列表的无限循环滚动

article 2024/9/25 23:16:38

1、安装

yarn add vue3-seamless-scroll

2、导入及基本使用

<!--组件.vue-->
<script setup>
    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
    import {ref} from 'vue'
    //vue3导入组件是不需要用component注册的
    //导入完成后如果项目本身是在运行的记得重新编译项目，不然会报错，如npm run dev
    const listData = ref([
        {title:'事件1',content:'内容1'},
        {title:'事件2',content:'内容2'},
        {title:'事件3',content:'内容3'},
        {title:'事件4',content:'内容4'},
    ])
    const isScroll=ref(true)
</script>
<template>
	<div class="contain">
        <vue3-seamless-scroll
            class="scroll"
            v-model="isScroll"
            :list="listData"
            :step="0.3"
            :hover="true"
            :limit-scroll-num="3"
            :wheel="true"
        >
            <div v-for="item in listData" class="item">
                <div class="title">
                    {{item.title}}:{{item.content}}
    			  </div>
    		</div>
    	</vue3-seamless-scroll>
    </div>
</template>
<style>
    .scroll{
       /* 必需要设置合适的高,因为他的原理是往列表最后添加列表重复元素，所以这个组件高不要大于其内容原先的最大高度 */
          height: 90px;
          width: 300px;
          overflow: hidden;
    }
</style>