Wie man in vue3 ein nahtloses Scrollen des Tabelleninhalts erreicht, habe ich eine Menge redundanten Code geschrieben

Hintergrund

Kürzlich entwickeln wir ein Großbild-Visualisierungsprojekt. Neben verschiedenenecharts Diagrammen und Kartendarstellungen gibt es auch mehrere Tabellen. Jetzt besteht die Anforderung, alle Tabellen im großen Bildschirm auf nahtloses Scrollen des Inhalts einzustellen.
Basierend auf den sieben Todsünden der Programmierer habe ich zum ersten Mal versucht, mich davor zu drücken, bin aber gescheitert.

• Nach einer einfachen Suche im Internet gibt es zwei für unser Projekt geeignete Optionen: Die erste ist die Verwendung eines Plug-Ins vue3-seamless-scroll.
• Die zweite Möglichkeit besteht darin, selbst JS-Code zu schreiben, um das automatische Scrollen der Tabellen-Bildlaufleiste über einen Timer zu steuern.

Option eins

Aus Sicht der tatsächlichen Entwicklung wäre es am besten, Plug-Ins zu verwenden, die über ähnliche Funktionen verfügen und problemlos sofort einsatzbereit sind. Dies kann die Arbeitseffizienz erheblich verbessern und das Ziel erreichen, von der Arbeit loszukommen pünktlich.

vue3-seamless-scroll(Klicken Sie hier, um die offizielle Dokumentation aufzurufen)

Gemäß der Plug-In-Beschreibung unterstützt die aktuelle Komponente nahtloses Scrollen nach oben, unten, links und rechts sowie einstufiges Scrollen und unterstützt nahtloses Scrollen komplexer Symbole. Die unterstützte Plattform stimmt mit der von Vue3.0 unterstützten Plattform überein.

Installieren

npm
npm install vue3-seamless-scroll --save

yarn
yarn add vue3-seamless-scroll

browser
<script src="https://unpkg.com/browse/[email protected]/dist/vue3-seamless-scroll.min.js"></script>

Aufbau

• Liste

Scrollt Listendaten nahtlos unter Verwendung der Listenlänge intern in der Komponente.
Typ: Array
erforderlich: wahr

• V-Modell

Steuern Sie das Scrollen und Anhalten der Animation durch das V-Modell und starten Sie standardmäßig den Scrollvorgang.
Typ: Boolean
Standard: true
erforderlich: falsch

• Richtung

Steuern Sie die Bildlaufrichtung, optionale Werte sind oben, unten, links, rechts
Typ: String
Standard: „oben“

• isWatch

Datenaktualisierungsüberwachung aktivieren
Typ: Boolean,
Standard: wahr,
erforderlich: falsch

• schweben

Ob Mauszeiger aktiviert werden soll
Typ: Boolean
Standard: falsch
erforderlich: falsch

• zählen

Anzahl der Animationsschleifen, Standard-Endlosschleife
Typ: Anzahl
Standard: „unendlich“
erforderlich: falsch

• limitScrollNum

Die Datenmenge, die das Scrollen ermöglicht. Nur die Listenlänge ist größer oder gleich diesem Wert.
Typ: Zahl,
Standardeinstellung : 5,
erforderlich: falsch

• Schritt

Anzeige
Typ: Zahl,
erforderlich: falsch

• singleHeight

Die Höhe, bei der die Einzelschrittbewegung stoppt
Typ: Zahl,
Standard: 0,
erforderlich : falsch< /span>

• singleWidth

Einzelschritt-Bewegungsstoppbreite
Typ: Zahl,
Standard: 0,
erforderlich: falsch< /span>

• singleWaitTime

Einzelschritt-Stopp-Wartezeit (Standardwert 1000 ms)
Typ: Zahl,
Standard: 1000,
erforderlich: false

• isRemUnit

singleHeight und singleWidth werden nicht verwendet
Typ: Boolean
Standard: true
erforderlich: false

• Verzögerung

Animationsverzögerungszeit
Typ: Zahl,
Standard: 0,
erforderlich: falsch

• Leichtigkeit

Animationseffekt, Sie können einen Bezier-Kurvenwert übergeben
Typ: String | kubischer Bezier,
Standard: „ease-in“, < /span>
erforderlich: false

• copyNum

Die Anzahl der Kopien der Liste, die Standardkopie ist einmal. Wenn die Höhe des übergeordneten Elements größer als das Doppelte der Rendering-Höhe der Liste ist, können Sie diesen Parameter verwenden, um die Anzahl der Kopien zu steuern die Liste, um einen nahtlosen Scrolleffekt zu erzielen
Typ: Zahl
Standard: 1
erforderlich: falsch

• Rad

Ob das Scrollen mit dem Rad aktiviert werden soll, wenn der Mauszeiger aktiviert ist, ist standardmäßig nicht aktiviert
Typ: boolean
Standard: false< a i =3> erforderlich: falsch

• einzelne Zeile

Einzeiliges horizontales Scrollen aktivieren
Typ: boolean
Standard: false
erforderlich: false

verwenden

1. Komponenten registrieren

• Globale Registrierung

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

• Einzeldateiregistrierung

<script>
  import {
    
     defineComponent } from "vue";
  import {
    
     Vue3SeamlessScroll } from "vue3-seamless-scroll";
   export default defineComponent({
    
    
      components: {
    
    
        Vue3SeamlessScroll
      }
   })
</script>

2. Komponenten verwenden

Wir müssen hier durch den Tabelleninhalt scrollen. Das direkte Umschließen der Tabelle mit Komponenten führt dazu, dass die Kopfzeile der Tabelle wegrollt, sodass es eine kleine Änderung in der Verwendung gibt
Die Tabelle Der Code muss erneut kopiert werden. Der erste Code ändert den CSS-Code, um den Hauptteil der Tabelle auszublenden. Der zweite Code ist mit Komponenten umschlossen und verbirgt den Header-Teil;

<template>
    <div class="container">
        <el-table class="top-table" :data="tableData" border style="width: 100%;">
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="content" label="内容" />
        </el-table>
        <vue3-seamless-scroll class="seamless" :list="tableData" :hover="true" :step="0.4" :wheel="true" :isWatch="true">
            <el-table class="bottom-table" :data="tableData" border style="width: 100%;">
                <el-table-column prop="type" label="类型" width="120" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="content" label="内容" />
            </el-table>
        </vue3-seamless-scroll>
    </div>
</template>

<script lang="ts" setup>
import {
    
     ref } from 'vue'

const tableData: any = ref([])

const getData = () => {
    
    
    for (let i = 0; i < 6; i++) {
    
    
        tableData.value.push({
    
    
            type: `家常菜${
      
      i + 1}`,
            name: `洋茄子炒鸡蛋${
      
      i + 1}`,
            content: `多情键客无情键${
      
      i + 1}`
        })
    }
}
getData()
</script>

<style scoped>
.container {
    
    
    width: 500px;
    height: 300px;
}
.seamless {
    
    
    width: 100%;
    height: 220px;
    overflow: hidden;
}
:deep .top-table .el-table__body-wrapper {
    
    
    display: none;
}
:deep .bottom-table .el-table__header-wrapper {
    
    
    display: none;
    width: 100%;
}
</style>

Denken Sie, dass der Effekt in Ordnung ist?Aber gibt es immer noch Probleme. Im obigen Beispiel haben wir nur 6 Daten erstellt , aber in Wirklichkeit befinden sich in unserem Projekt etwa 50 Datenelemente auf einer einzelnen Seite des Formulars. Ändern wir es in 50 Datenelemente und sehen uns die Auswirkung an

Dieses Plug-in hat bereits einige Änderungen für die Verwendung beim Scrollen von Tabelleninhalten vorgenommen. Jetzt müssen wir weitere Änderungen vornehmen, um den gewünschten Effekt zu erzielen. Für unsere aktuellen Anforderungen kann es nicht direkt nach dem Auspacken verwendet werden. Hier bin ich also. Let's Geben Sie diesen Plan einfach auf und verlassen Sie ihn, um zu sehen, wie wir später, wenn wir Zeit haben, die gewünschten Ergebnisse erzielen können. Im Moment konzentrieren wir uns immer noch auf die Arbeitseffizienz. Wenn jemand von euch es recherchiert hat, könnt ihr mir natürlich gerne eine private Nachricht schicken. Es gibt keine Belohnung, aber ich möchte einfach einen Blick darauf werfen.

Option II

Die zweite Möglichkeit besteht darin, die Bildlaufleiste direkt zu bedienen und einen Timer einzustellen, damit sie von selbst scrollt. Dies ist eine relativ einfache Grundfunktion des Frontends.

Ideen

Wir müssen nur einen Timer deklarieren, den Bildlaufbereich nach Erhalttable DatenscrollHeight abrufen und ihn im Timer ändern < a i=3> Automatisches Scrollen der Bildlaufleiste implementierenscrollTop

Nachdem wir den Code bald fertiggestellt haben, werfen wir einen Blick auf den Effekt.

mein Code

<template>
    <div class="container">
        <el-table ref="tableRef" :data="tableData" border style="width: 100%;height: 100%;">
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="content" label="内容" />
        </el-table>
    </div>
</template>

<script setup>

import {
    
     ref, onMounted, onUnmounted } from 'vue'

let timer = null;
let tableRef = ref(null);
const scroll = () => {
    
    
    // 在执行新的计时器前将之前的计时器清除
    if (timer) clearInterval(timer);
    let status = true;
    // 获取表格滚动区域的dom
    const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];

    // 增加监听事件鼠标移入停止滚动
    scrollDom.addEventListener('mouseover', () => {
    
    
        status = false;
    });
    // 鼠标移出恢复滚动
    scrollDom.addEventListener('mouseout', () => {
    
    
        status = true;
    });

    // 设置每秒滚动一行
    timer = setInterval(() => {
    
    
        if (status) {
    
    
        	// 设置每次滚动的像素
            scrollDom.scrollTop += 40;
            // 当滚动到底部时修改scrollTop回到顶部
            if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1 ) {
    
    
                scrollDom.scrollTop = 0;
            }
        }
    }, 1000);
}

const tableData = ref([])
const getData = () => {
    
    
    for (let i = 0; i < 50; i++) {
    
    
        tableData.value.push({
    
    
            type: `家常菜${
      
      i + 1}`,
            name: `洋茄子炒鸡蛋${
      
      i + 1}`,
            content: `多情键客无情键${
      
      i + 1}`
        })
    }
    // 要在数据都加载渲染完成后去获取表格的滚动区域dom
    setTimeout(() => {
    
    scroll()}, 1000)
}


onMounted(() => {
    
    
    getData()
})

onUnmounted(() => {
    
    
	// 组件卸载记得清除计时器
    if (timer) clearInterval(timer);
    timer = null;
})

</script>

<style scoped>
.container {
    
    
    width: 500px;
    height: 310px;
}
</style>

Ende

Abschließend wird der fertige Code gekapselt und an verschiedenen Stellen aufgerufen, um redundanten Code zu vermeiden. Okay, das war’s für die Klasse B heute.