在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件

yang295242361

于 2024-08-26 10:02:42 发布

阅读量420

点赞数 12

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/yang295242361/article/details/141556246

版权

一、示例代码

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