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

最新推荐文章于 2024-08-27 09:44:51 发布

n'an-n'an

最新推荐文章于 2024-08-27 09:44:51 发布

阅读量319

点赞数 4

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_55932347/article/details/137919419

版权

npm i 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>