Scrollen Sie in Vue nach unten, um weitere Daten zu laden. Detaillierte Erläuterung des Scroll-Falls

npm installiere vue-infinite-scroll --save

importiere infiniteScroll aus „vue-infinite-scroll“
Vue.use(unendlichesScroll)

<div v-infinite-scroll="Mehr laden" infinite-scroll-disabled="beschäftigt" infinite-scroll-distance="10">
    <div v-for="Element in Daten" :key="item.index">{{item.name}}</div>
</div>

 Daten () {
    zurückkehren {
      Anzahl: 0,
      Daten: [],
      beschäftigt: falsch
    }
  }

Methoden: {
    Mehr laden: Funktion() {
      dies.beschäftigt = wahr
      setzeTimeout(() => {
        für (var i = 0, j = 10; i < j; i++) {
          dies.data.push({name: dies.count++ })
        }
        konsole.log(diese.daten)
        this.busy = falsch
      }, 1000)
    }
  }

 setzeTimeout(() => {
        für (var i = 0, j = 10; i < j; i++) {
          dies.data.push({name: dies.count++ })
        }
        konsole.log(diese.daten)
        this.busy = falsch
      }, 1000)

npm installiere vue-scroller -d

VueScroller aus „vue-scroller“ importieren
Vue.use(VueScroller)

<scroller style="top: 100px;" :height='400' :on-refresh="aktualisieren" :on-infinite="unendlich" ref="myscroller">
     <div Klasse = "order-box" v-for = "(item,index) in orderList" :key = "index">
                
     </div>
 </scroller>

Daten(){
           zurückkehren {
                Status: „alle“,
                Bestellliste:[],
                Seite:0,
                alle_seiten:1,
            }
        },

aktualisieren (fertig) {
                setzeTimeout(()=>{
                    Erledigt();
                },1500)
            },

//Nach unten ziehen, um unendlich auszulösen (erledigt) {
                wenn(diese.Seite>=diese.alle_Seiten){
                    setzeTimeout(()=>{
                        dies.$refs.myscroller.finishInfinite(true);
                    },1500)
                }anders{
                    
                    setzeTimeout(()=>{
                        diese.seite++;
                        dies.getorderList(erledigt)
                        
                    },500);
                }
            },
 
getorderList(erledigt){
                dies.$http({
                    Methode: 'post',
                    URL: „/seckill/server/orderList“,
                    Daten:{
                        jwt:dieses.jwt,
                        Status:dieser.status,
                        Seite:diese.Seite,
                        Seitengröße: 5
                    }
                }).dann(res=>{
                    wenn(res.data.code == 0){
                        
                        
                        diese.orderList.push.apply(diese.orderList,res.data.data.list)
                        dies.$refs.myscroller.finishInfinite(true)
 
                        diese.Seite = res.data.data.page
                        diese.alle_seite = res.daten.daten.alle_seite
                        Erledigt();
                    }anders{
                       
                    }
                })
            },

warenAlle(){
                dieser.status = "alle"
                diese.seite = 0
                diese.alle_seite = 1
                dies.$refs.myscroller.finishInfinite(false);
                diese.Bestellliste = []
            },

npm installiere vue-infinite-loading --save

// Die Komponentenklasse verwendet import InfiniteLoading from 'vue-infinite-loading';
 
Standard exportieren {
  Komponenten: { Unendliches Laden }
}
 
//Verwende die Basisversion <infinite-loading
  Spinner = "Spirale"
  @infinite="unendlicherHandler"
  :Entfernung="200"
  Klasse = "unendliches Laden-Wrap"
>
  <!-- <div slot="spinner">Wird geladen...</div> -->
  <div slot="no-more">Keine weiteren Daten</div>
  <div slot="no-results">Keine Ergebnisdaten</div>
  <!-- <div slot="Fehler" slot-scope="{ trigger }">
	Fehlerdaten. Klicken Sie <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="trigger">hier</a>, um es erneut zu versuchen
  </div> -->
</unendlich-laden>

<Vorlage>
  <div>　
		    <p v-for="(Element, Index) in Liste" :Schlüssel="Index">　
			     <span v-text="Artikel"></span>　
		    </p>　
		    <!--Die Komponente zum unendlichen Laden sollte am Ende der Liste, innerhalb des Bildlauffelds, platziert werden! -->
		<unendlich-laden
			Spinner = "Spirale"
			@infinite="unendlicherHandler"
			:Bezeichner="unendlicheId"
			:Entfernung="200"
			Klasse = "unendliches Laden-Wrap"
		>
			<div slot="spinner">Wird geladen...</div>
			<div slot="no-more">Keine weiteren Daten</div>
			<div slot="no-results">Keine Ergebnisdaten</div>
			<div slot="Fehler" slot-scope="{ trigger }">
			  Fehlerdaten. Klicken Sie <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="trigger">hier</a>, um es erneut zu versuchen
			</div>
		</unendlich-laden>　
	 </div>
</Vorlage>
 
<Skript>　
 importiere InfiniteLoading von „vue-infinite-loading“;
  Standard exportieren {
    Daten() {
      zurückkehren {
		  infiniteId: +new Date(), // Scroll-Status zurücksetzen, Seite ändern: 1,
        Liste: []
      };
    },
    Methoden: {
		// Scroll-Status zurücksetzen rest(){
		  diese.liste = [];
		  diese.Seite = 1;
		  diese.unendlicheId += 1;
		},
      async infiniteHandler($zustand) {
			// Anforderungsdaten simulieren const res = await this.$axios.workList({ page: this.page, pagesize: 20 });
			  wenn (res.data.list.length) {
				diese.seite += 1;
				diese.Liste = diese.Liste.concat(res.data.list);
				$zustand.geladen();
			  } anders {
				$zustand.abgeschlossen();
			  }
        // Hier wird eine Ladeverzögerung von 1 Sekunde simuliert //setTimeout(() => {
         // lass temp = [];
         // für (lass i = diese.Listenlänge + 1; i <= diese.Listenlänge + 20; i++) {
          //temp.push(i);
         // }
         // diese.Liste = diese.Liste.concat(temp);
         // $state.loaded();
        //}, 1000);
      //},
    },
    Komponenten: { Unendliches Laden }
  }
</Skript>

<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 Datenadresse für Sie an axios
        .get(api, {
          Parameter: {
            // Seitenzahlenparameter (10 pro Seite)
            Seite: this.list.length / 10 + 1,
          },
        })
        .then((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>

importiere { debounce } von "lodash"; // Anti-Shake // Anti-Shake get: debounce(async function () {
  lass k = warte darauf.$axios.getList_API();
  console.log(k, "Anti-Shake-Version");
}, 1000),