Heim  >  Artikel  >  Web-Frontend  >  vue-infinite-loading erzeugt einen unendlichen Ladeeffekt

vue-infinite-loading erzeugt einen unendlichen Ladeeffekt

php中世界最好的语言
php中世界最好的语言Original
2018-06-09 15:41:521795Durchsuche

Dieses Mal bringe ich Ihnen Vue-Infinite-Loading, um einen Infinite-Loading-Effekt zu erzeugen. Was sind die Vorsichtsmaßnahmen für Vue-Infinite-Loading, um einen Infinite-Loading-Effekt zu erzeugen?

Hinweis: vue-infinite-loading2.0 kann nur in Vue.js2.0 verwendet werden. Wenn Sie es in Vue.js1.0 verwenden möchten, installieren Sie bitte die Version vue-infinite-loading1.3

So installieren Sie

npm install vue-infinite-loading --save

Importmethode

ES6-Modul-Importmethode

import InfiniteLoading from 'vue-infinite-loading';
export default {
 components: {
  InfiniteLoading
 },
};

CommonJS-Modul-Importmethode

const InfiniteLoading = require('vue-infinite-loading');
export default {
 components: {
   InfiniteLoading
 }
};

Andere Methoden

<script src="vue-infinite-loading.js"></script>

Auf der Seite anwenden

Deklarieren Sie

components:{
  InfiniteLoading
}

Vorlagenteil direkt in der Komponente

<infinite-loading @infinite="infiniteHandler">
  <span slot="no-more">
     我们是有底线的
  </span>
</infinite-loading>

js-Teil

Lösen Sie beim Scrollen zur Komponente automatisch das InfinityHandler-Ereignis aus unten

infiniteHandler($state) {
     setTimeout(() => {
       const temp = [];
       for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
         temp.push(i);
       }
       this.list = this.list.concat(temp);
       $state.loaded();
       $state.complete();
     }, 1000);
}

Hinweis

Wenn Sie noch verwenden
this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
this .$refs. infiniteLoading.$emit('$InfiniteLoading:complete');
Eine Warnung wird angezeigt, die Sie darüber informiert, dass diese Methode zur Übergabe von Parametern an $state verwendet wurde.

Attribute

Entfernung: Dies ist der kritische Wert für das Scrollen. Wenn der Abstand zum unteren Rand des übergeordneten Bildlaufelements kleiner als dieser Wert ist, wird die Rückruffunktion „infiniteHandler“ aufgerufen.

<infinite-loading @infinite="infiniteHandler" distance="Number">
</infinite-loading>

Spinner: Mit diesem Attribut können Sie einen Ihrer Lieblingsspinner als Ladeanimation auswählen.
spinner="bubbles";
1, Blasen
2, Kreise
3, Standard
4, Spirale
5, waveDots

<infinite-loading @infinite="infiniteHandler" spinner="String">
</infinite-loading>

Richtung: Wenn Sie Setzen Sie diese Eigenschaft auf „top“, dann ruft diese Komponente die Funktion „infiniteHandler“ auf, wenn Sie nach oben scrollen.

Warnung: Sie müssen scrollTop des übergeordneten Scroll-Elements manuell auf den richtigen Wert setzen, nachdem die Daten geladen wurden, andernfalls ruft die Komponente die Funktion „infiniteHandler“ immer wieder auf.

direction="top"

<infinite-loading @infinite="infiniteHandler" direction="String">
</infinite-loading>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Sofortige Verwendung von Watch im Vue-Projekt

So verwenden Sie das Installations-Plug-in tatsächlich Projekte

Das obige ist der detaillierte Inhalt vonvue-infinite-loading erzeugt einen unendlichen Ladeeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn