Vue implementiert ein Beispiel zum Herunterziehen und Scrollen zum Laden von Daten

npm installiere vue-infinite-loading --save

importiere InfiniteLoading von „vue-infinite-loading“;

Standard exportieren {
  Komponenten: { Unendliches Laden }
}

<Vorlage>
  <div> <p v-for="item in list"> <span v-text="item"></span> </p> <!--Die Komponente zum unendlichen Laden sollte am Ende der Liste, innerhalb des Bildlauffelds, platziert werden! --> <infinite-loading @infinite="infiniteHandler"></infinite-loading> </div></template><script> importiere InfiniteLoading von 'vue-infinite-loading';

  Standard exportieren {
    Daten() {
      zurückkehren {
        Liste: []
      };
    },
    Methoden: {
      infiniteHandler($zustand) {
        // Hier wird eine Ladeverzögerung von 1 Sekunde simuliert setTimeout(() => {
          lass temp = [];
          für (lass i = diese.Liste.Länge + 1; i <= diese.Liste.Länge + 20; i++) {
            temp.push(i);
          }
          diese.Liste = diese.Liste.concat(temp);
          $zustand.geladen();
        }, 1000);
      },
    },
    Komponenten: { Unendliches Laden }
  }</script>

<Vorlage>
    <div>
          <ul>
              <li class="hacker-news-item" v-for="(item, key) in list"></li>
        </ul>
        <unendlich-laden @infinite="infiniteHandler">
            Keine weiteren Daten
        </unendlich-laden>
    </div>
</Vorlage>    

<Skript>
    importiere InfiniteLoading von „vue-infinite-loading“;
    importiere Axios von „Axios“;

    Standard exportieren {
          Daten() {
            zurückkehren {
                  Liste: []
            };
          },
          Methoden: {
            infiniteHandler($zustand) {
                let api="http://xxx.com/xxx";
                //API fordert die Datenadresse für Sie an axios.get(api, {
                    Parameter: {
                        // Seitenzahlenparameter (10 pro Seite)
                          Seite: this.list.length / 10 + 1,
                    },
                  }).dann((Antwort) => {
                    wenn (Antwort.Daten.Länge) {
                        // response.data ist die Array-Liste, die von Ihrer Anforderungsschnittstelle zurückgegeben wird: this.list = this.list.concat(response.data);
                          $zustand.geladen();
                          wenn (diese.Liste.Länge / 10 === 10) {
                              // Hier werden 10 Seiten mit Daten geladen und die Einstellung ist, dass keine weiteren geladen werden $state.complete(); 
                          }
                    } anders {
                          $zustand.abgeschlossen();
                    }
                  });
            }
          },
          Komponenten: { Unendliches Laden }
    };
</Skript>

<Vorlage>
    <div Klasse="Hacker-News-Liste">
          <div Klasse="Hacker-News-Header">
            <!--Zum Ändern nach unten ziehen-->
            <select v-model="tag" @change="changeFilter()">
                  <option value="story">Geschichte</option>
                  <option value="history">Verlauf</option>
            </Auswählen>
              <!--Oder klicken zum Ändern-->
            <button @click="changeFilter()">Suchen</button>
          </div>
          <ul>
              <li class="hacker-news-item" v-for="(item, key) in list"></li>
           </ul>
           <!--Vergessen Sie nicht, dies festzulegen: ref="infiniteLoading"-->
          <unendlich-laden @infinite="infiniteHandler" ref="infiniteLoading">
            Keine Daten mehr
          </unendlich-laden>
    </div>
</Vorlage>

<Skript>
    importiere InfiniteLoading von „vue-infinite-loading“;
    importiere Axios von „Axios“;

    Standard exportieren {
          Daten() {
            zurückkehren {
                  Liste: [],
                  Schlagwort: 'Geschichte',
            };
          },
          Methoden: {
            infiniteHandler($zustand) {
                  const api="http://xxx.com/xxx";
                  //API fordert die Datenadresse für Sie an axios.get(api, {   
                    Parameter: {
                        // Geänderte bedingte Parameter-Tags: this.tag,  
                          Seite: this.list.length / 10 + 1,
                    },
                  }).dann(({ Daten }) => {
                    if (Daten.Ergebnis.Länge) {
                          diese.Liste = diese.Liste.concat(Daten.Ergebnis);
                          $zustand.geladen();
                          wenn (diese.Liste.Länge / 20 === 10) {
                            Zustand.abgeschlossen();
                          }
                    } anders {
                          $zustand.abgeschlossen();
                    }
                  });
            },
            //Ändern Sie die bedingte Leiste mit dieser Methode changeFilter() {
                  diese.liste = [];
                  dies.$nextTick(() => {
                    dies.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
                  });
            },
          },
          Komponenten: { Unendliches Laden }
    }
</Skript>