vue3SeamlessScroll 实现简单列表无限循环滚动
【代码】vue3SeamlessScroll 实现简单列表无限循环滚动。
·
npm install vue3-seamless-scroll
<template>
<vue3-seamless-scroll
class="v-s-s"
:list="list"
:step=".4"
: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 setup lang="ts">
import { reactive } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
const list = reactive([
{ title: 'QQQWWWWCCCCTTT第一行', date: '2022-3-4-5-6-7' },
{ title: 'QQQWWWWCCCCTTT第二行', date: '2022-3-4-5-6-7' },
{ title: 'QQQWWWWCCCCTTT第三行', date: '2022-3-4-5-6-7' },
{ title: 'QQQWWWWCCCCTTT第四行', date: '2022-3-4-5-6-7' },
{ title: 'QQQWWWWCCCCTTT第五行', date: '2022-3-4-5-6-7' },
{ title: 'QQQWWWWCCCCTTT第六行', date: '2022-3-4-5-6-7' },
{ title: 'QQQWWWWCCCCTTT第七行', date: '2022-3-4-5-6-7' },
{ title: 'QQQWWWWCCCCTTT第八行', date: '2022-3-4-5-6-7' },
{ title: 'QQQWWWWCCCCTTT第九行', date: '2022-3-4-5-6-7' },
])
</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;
height: 20px;
}
}
</style>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)