js realisiert das dynamische Laden von Daten durch Wasserfallfluss

js realisiert das dynamische Laden von Daten durch Wasserfallfluss

In diesem Artikel erfahren Sie den spezifischen Code von js, um das dynamische Laden von Daten zu realisieren, wenn der Wasserfallfluss den Boden berührt. Zu Ihrer Information ist der spezifische Inhalt wie folgt


// onScrollEvent Bildlaufleistenereignis <div class="box" ref="box" @mousewheel="onScrollEvent">
    //Der Inhalt jedes Blocks beginnt
      <div Klasse="boxItemStyle" v-for="(Benutzertag, i) in Datenquelle" :key="i" ref="boxItemStyle">
        <a-tag class="moreStyle" @click="more(userTag.primaryParam)"> Mehr></a-tag>
        <div v-for="Element in Benutzertag.Benutzertag" :key="Element.code">
          <p>
            {{ item.name }}:
            {{ Artikel.Wert }}
          </p>
        </div>
      </div>
      //Inhalte in jedem Block enden
</div>

Wasserfall-Layout

Wasserfall() {
  // Subtrahieren Sie die Breite des Randes var pageWidth = this.$refs.box.offsetWidth - 200
      var columns = 4; //Definiere eine Zeile mit 4 Spalten var itemWidth = parseInt(pageWidth / columns);
      var arr = [];
      var Knoten = document.getElementsByClassName("boxItemStyle")
      setzeTimeout(() => {
        //var node1 = Array.from(Knoten)
       // var node2 = Array.prototype.slice.call(Knoten)
        für (var i = 0; i < Knoten.Länge; i++) {
          Knoten[i].style.width = Elementbreite + "px"
          if (i < Spalten) {
            Knoten[i].style.width = Elementbreite + "px"
            Knoten[i].style.left = Artikelbreite * i + i * 50 + "px"
            Knoten[i].style.top = 0
            arr.push(Knoten[i].offsetHeight);
          } anders {
            // Finde die minimale Höhe im Array und seinen Index var minHeight = arr[0];
            Var-Index = 0;
            für (var j = 0; j < arr.length; j++) {
              wenn (minHeight > arr[j]) {
                minHöhe = arr[j];
                Index = j;
              }
            }
            Knoten[i].style.top = arr[index] + 30 + "px",
              Knoten[i].style.left = Knoten[index].offsetLeft + 'px';
            // Höhe der Mindestspalte ändern // Höhe der Mindestspalte = aktuelle Höhe + Höhe der gespleißten Spalte arr[index] = arr[index] + nodes[i].offsetHeight + 30; // Abstand auf 30 einstellen }
        }
      }, 1000)
    },

Dynamisches Laden von Daten

beiScrollEvent () {
      Wenn (
        dies.isScroll &&
        dies.$refs.box.scrollHeight - dies.$refs.box.scrollTop - dies.$refs.box.clientHeight <= 0
      ) {
        dies.laden = wahr
        wenn (this.ipagination.current == 1) {
          dies.ipagination.current += 1
        }
        let param = {}
        param['Seitennr.'] = diese.ipagination.aktuell
        param['Seitengröße'] = this.ipagination.Seitengröße
        param['portraitId'] = diese.portraitId
        postAction(diese.url.list, { ...param }).then((res) => {
          dies.laden = falsch
          wenn (res.erfolg) {
            this.isScroll = res.Datensätze
            diese.Datenquelle = diese.Datenquelle.concat(res.Ergebnis.Datensätze || res.Ergebnis)
            dies.waterFall();
          }
        })
        dies.ipagination.current++
      }
    },

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • JS realisiert den Effekt des Bildwasserfallflusses
  • Verwenden von js, um einen Wasserfalleffekt zu erzielen
  • So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten
  • js, um ein Wasserfall-Flusslayout zu erreichen (unendliches Laden)
  • 3 Möglichkeiten zum Implementieren eines Wasserfalllayouts mit JavaScript
  • Haben Sie gelernt, wie man einen JavaScript-Wasserfallfluss implementiert?

<<:  So finden und löschen Sie doppelte Datensätze in MySQL

>>:  Probleme und Lösungen bei der Installation von Docker in der Alibaba Cloud

Artikel empfehlen

Zusammenfassung der MySQL-Tabellen- und Spaltenkommentare

Genau wie bei Code können Sie den Tabellen und Sp...

Beispiel für eine automatische Importmethode für das Vue3.0-Routing

1. Voraussetzungen Wir verwenden zum Importieren ...

MySQL Dezimalzahl unsigned Update negative Zahlen in 0 umgewandelt

Heute habe ich bei der Überprüfung des Parallelit...

Implementierung einer Lösung für adaptive Textbereichshöhe in Vue

Inhaltsverzeichnis Versteckte Probleme Lösung zur...

Beispieltest MySQL-Enumerationstyp

Bei der Entwicklung eines Projekts stößt man häuf...

So überwachen und löschen Sie abgelaufene Sitzungen in Tomcat

Vorwort Ich habe zufällig entdeckt, dass die halb...

Spezifische Verwendung von Vues neuem Spielzeug VueUse

Inhaltsverzeichnis Vorwort Was ist VueUse Einfach...

【HTML-Element】So betten Sie Bilder ein

Mit dem img-Element können wir Bilder in HTML-Dok...