【vue3】vue3-seamless-scroll无缝滚动列表的使用

使用版本：“vue3-seamless-scroll”: “^2.0.1”
下载：

npm install vue3-seamless-scroll --save

vue3-seamless-scroll

main.js全局配置（全局）：

import App from './App.vue'
import { createApp } from 'vue'
import vue3SeamlessScroll from "vue3-seamless-scroll";
const app = createApp(App);
app.use(vue3SeamlessScroll);
app.mount('#app');

页面中使用：

<div class="rb-c">
          <div class="header">
            <div class="box-1"></div>
            <div class="box-2">标题内容</div>
            <div class="box-3">类型</div>
            <div class="box-4">发布时间</div>
          </div>
          <vue3-seamless-scroll class="seamless" :list="tableData" :limitScrollNum="5" :hover="true" :step="0.4" :wheel="true" :isWatch="true">
            <div class="msg" v-for="(item,index) in tableData" :key="index">
              <div class="box-1"><svg-icon name="dingwei"></svg-icon></div>
              <div class="box-2">{{item.name}}</div>
              <div class="box-3" :style="{color:item.type=='新闻'?'rgba(47,255,224,0.8)':'rgba(255,137,60,0.8)'}">{{item.type}}</div>
              <div class="box-4">{{item.content}}</div>
            </div>
          </vue3-seamless-scroll>
        </div>

const tableData= ref([])
onMounted(()=>{
   for (let i = 0; i < 50; i++) {
      tableData.value.push({
        type: i%2==1?"新闻":"成果",
        name: `文字内容标题信息文字内容标题信息`,
        content: new Date().toLocaleString()
      })
    }
})

.rb-c{
      position: relative;
      width: 100%;
      margin-top: 20px;
      height: 340px;
      overflow: hidden;
      pointer-events: auto;

      .seamless {
        width: 100%;
        height: 300px;
        overflow: hidden;
      }
      .header{
        position: relative;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        text-align: center;
        color: #1a98ff;
        font-weight: 600;
        background-color: #207adb61;
        display: flex;
      }
      .msg{
        position: relative;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        background-color: #0a2f5761;
        display: flex;
      }
      .box-1{
        width: 10%;
      }
      .box-2{
        width: 35%;
        overflow:hidden;
        text-overflow:ellipsis;//文本溢出显示省略号
        white-space:nowrap;//文本不会换行
      }
      .box-3{
        width: 18%;
        overflow:hidden;
        text-overflow:ellipsis;//文本溢出显示省略号
        white-space:nowrap;//文本不会换行
      }
      .box-4{
        width: 35%;
        overflow:hidden;
        text-overflow:ellipsis;//文本溢出显示省略号
        white-space:nowrap;//文本不会换行
      }
    }

ps:表头多的也可直接使用网格布局（隔行换背景色）

<div class="header">
        <span v-for="(item,i) in  header" :key="i">
          {{item}}
        </span>
      </div>
      <vue3-seamless-scroll class="seamless" :list="showData" :limitScrollNum="6" :hover="true" :step="0.4"
                            :wheel="true" :isWatch="true">
        <div v-for="(item ,index) in showData" class="detail"
             :style="{'background-color':index%2===0?'transparent':'rgba(152,161,177,0.12)'}" :key="index">
          <span>{{ item.name }}</span>
          <span >{{ item.percent }}</span>
          <span >{{ item.num }}</span>
          <span>{{ item.date }}</span>
        </div>
      </vue3-seamless-scroll>

.header{
      line-height: 60px;
      font-size: 22px;
      color: #00D1FF;
      display: grid;
      grid-template-columns: 1fr .8fr .8fr .8fr ;
      text-align: center;
    }

    .seamless {
      position: relative;
      max-height: 340px;
      width: 100%;
      color: #fffc;
      background-color: transparent;
      overflow: hidden;
      text-align: center;
      pointer-events: auto;
    }

    .detail {
      display: grid;
      grid-template-columns: 1fr .8fr .8fr .8fr ;
      font-size: 20px;
      line-height: 45px;
      overflow: hidden;
      text-overflow: ellipsis; //文本溢出显示省略号
      white-space: nowrap; //文本不会换行
    }