快捷導(dǎo)航

vue3實(shí)現(xiàn)無(wú)縫滾動(dòng)列表效果(大屏數(shù)據(jù)輪播場(chǎng)景)

更新時(shí)間：2024年07月14日 14:04:19 作者：蒾酒

vue3-scroll-seamless 是一個(gè)用于 Vue 3 的插件,用于實(shí)現(xiàn)無(wú)縫滾動(dòng)的組件,它可以讓內(nèi)容在水平或垂直方向上無(wú)縫滾動(dòng),適用于展示輪播圖、新聞滾動(dòng)、圖片展示等場(chǎng)景,本文就給大家介紹了vue3實(shí)現(xiàn)無(wú)縫滾動(dòng)列表效果,需要的朋友可以參考下

實(shí)現(xiàn)思路

vue3目前可以通過(guò)第三方組件來(lái)實(shí)現(xiàn)這個(gè)需求。

下面介紹一下這個(gè)第三方滾動(dòng)組件--vue3-scroll-seamless

vue3-scroll-seamless 是一個(gè)用于 Vue 3 的插件，用于實(shí)現(xiàn)無(wú)縫滾動(dòng)的組件。它可以讓內(nèi)容在水平或垂直方向上無(wú)縫滾動(dòng)，適用于展示輪播圖、新聞滾動(dòng)、圖片展示等場(chǎng)景。

主要特性和用法

無(wú)縫滾動(dòng)：在內(nèi)容超出容器寬度或高度時(shí)，可以實(shí)現(xiàn)自動(dòng)無(wú)縫滾動(dòng)，形成連續(xù)的視覺(jué)效果。
多種配置選項(xiàng)：提供了多種配置選項(xiàng)來(lái)控制滾動(dòng)的速度、方向、內(nèi)容顯示方式等。
響應(yīng)式支持：支持響應(yīng)式設(shè)計(jì)，可以根據(jù)父容器的大小自動(dòng)調(diào)整內(nèi)容的顯示和滾動(dòng)效果。
靈活的內(nèi)容布局：內(nèi)容可以是任意的 Vue 組件或 HTML 元素，可以自定義每一項(xiàng)的樣式和內(nèi)容。
事件和方法：支持一些事件回調(diào)和方法，例如滾動(dòng)到指定位置、開(kāi)始、暫停、重新開(kāi)始滾動(dòng)等。

官網(wǎng)地址：vue3-scroll-seamless | vue3-scroll-seamless (xiaofulzm.github.io)

建議去參考網(wǎng)文檔使用。

無(wú)縫滾動(dòng)列表實(shí)現(xiàn)

安裝依賴

npm install vue3-scroll-seamless --save

main.js/ts導(dǎo)入

// 導(dǎo)入Vue3 Scroll  Seamless組件
import {vue3ScrollSeamless} from "vue3-scroll-seamless";
 
// 注冊(cè) Vue3 Scroll Seamless 組件
app.component('vue3ScrollSeamless',vue3ScrollSeamless)
 
// 掛載Vue應(yīng)用
app.mount('#app')

實(shí)現(xiàn)代碼示例

以上代碼用到了element-plus的el-row和el-col組件

<script lang="ts" setup>
import { reactive } from "vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
const list = reactive([
  { trainNumber: 'G1234', destination: '北京南', departureTime: '09:00', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'G5678', destination: '上海虹橋', departureTime: '09:15', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'D4321', destination: '廣州南', departureTime: '09:30', status: '晚點(diǎn)' },
  { trainNumber: 'G8765', destination: '成都東', departureTime: '09:45', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'G9876', destination: '西安北', departureTime: '10:00', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'D6543', destination: '深圳北', departureTime: '10:15', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'G2345', destination: '重慶北', departureTime: '10:30', status: '晚點(diǎn)' },
  { trainNumber: 'G1111', destination: '天津西', departureTime: '10:45', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'G2222', destination: '南京南', departureTime: '11:00', status: '晚點(diǎn)' },
  { trainNumber: 'D3333', destination: '杭州東', departureTime: '11:15', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'G4444', destination: '武漢', departureTime: '11:30', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'G5555', destination: '濟(jì)南西', departureTime: '11:45', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'D6666', destination: '長(zhǎng)沙南', departureTime: '12:00', status: '晚點(diǎn)' },
  { trainNumber: 'G7777', destination: '南昌西', departureTime: '12:15', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'G8888', destination: '沈陽(yáng)北', departureTime: '12:30', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'D9999', destination: '福州南', departureTime: '12:45', status: '準(zhǔn)點(diǎn)' },
  { trainNumber: 'G1010', destination: '哈爾濱西', departureTime: '13:00', status: '晚點(diǎn)' }
 
]);
const classOptions = reactive({
  step: 0.5,//滾動(dòng)速度值越大越快，但是值太小會(huì)卡頓
  limitMoveNum: list.length,//無(wú)縫滾動(dòng)列表元素的長(zhǎng)度，一般設(shè)置為列表的長(zhǎng)度
  direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
 
});
 
</script>
 
<template>
  <div class="demo">
    <div class="title-container">
      <div class="title">車次信息展示列表</div>
    </div>
    <div class="table-header">
      <div class="header">
        <el-row>
          <el-col :span="6" class="center">
            <div>車次</div>
          </el-col>
          <el-col :span="6" class="center">
            <div>目的地</div>
          </el-col>
          <el-col :span="6" class="center">
            <div>發(fā)車時(shí)間</div>
          </el-col>
          <el-col :span="6" class="center">
            <div>狀態(tài)</div>
          </el-col>
        </el-row>
      </div>
    </div>
 
    <vue3ScrollSeamless class="scroll-wrap border text-color" :classOptions="classOptions" :dataList="list">
      <div v-if="list.length > 0">
        <el-row v-for="(item, i) of list" :key="i">
          <el-col :span="6" class="center">
            <div>{{ item.trainNumber }}</div>
          </el-col>
          <el-col :span="6" class="center">
            <div>{{ item.destination }}</div>
          </el-col>
          <el-col :span="6" class="center">
            <div style="width: 30px;">{{ item.departureTime }}</div>
          </el-col>
          <el-col :span="6" class="center">
            <div style="width: 30px;">{{ item.status }}</div>
          </el-col>
        </el-row>
      </div>
      <div v-if="list.length == 0"
        style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;">
        暫無(wú)預(yù)測(cè)記錄</div>
    </vue3ScrollSeamless>
  </div>
</template>
<style scoped>
.title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin-bottom: 20px;
}
 
.title {
  font-size: 19px;
}
 
.demo {
  width: 100%;
  height: 100%;
}
 
.scroll-wrap {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  background-color: rgb(0, 5, 38, 0.5);
  font-size: 15px;
}
 
.table-header {
  font-family: Arial, sans-serif;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid rgb(13, 162, 221);
  background-color: rgba(3, 137, 174, 0.5);
}
 
.header {
  width: 100%;
  font-size: 16px;
}
 
.border {
  border: 1px solid rgb(13, 162, 221);
}
 
.center {
  display: flex;
  align-items: center;
  justify-content: center;
 
}
 
.text-color {
  color: rgb(128, 250, 124);
}
</style>

效果展示

到此這篇關(guān)于vue3實(shí)現(xiàn)無(wú)縫滾動(dòng)列表效果(大屏數(shù)據(jù)輪播場(chǎng)景)的文章就介紹到這了,更多相關(guān)vue3無(wú)縫滾動(dòng)列表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: