vue-infinite-loading2.0 Chinesische Dokumentation, ausführliche Erklärung

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der chinesischen Dokumentation von vue-infinite-loading2.0 vor. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Einführung

Dies ist ein Infinite-Scroll-Plug-In, das in Vue.js verwendet wird und Ihnen dabei helfen kann, schnell eine Infinite-Scroll-Liste zu erstellen.

Funktionen

1. Mobilfreundlich

2. Kompatibel mit jedem scrollbaren Element

3. Es gibt verschiedene Spinner, die als Ladeanimationen verwendet werden können

4. Unterstützt die Anzeige von Ergebnissen nach dem Laden

5. Unterstützt zwei unbegrenzte Ladevorgänge in alle Richtungen

9edcdb420db994b8fec71e3b24005d92Installation94b3e26ee717c64999d7867364b1b4a3

8e99a69fbe029cd4e2b854e244eab143Hinweis: 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.3128dba7a3a77be0113eb0bea6ea0a5d0

npm install vue-infinite-loading --save

Import Methode

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="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script>

vue-infinite-loading.js registriert eine globale Die Variable VueInfiniteLoading muss wie folgt verwendet werden:

 ...
 components: {
   VueInfiniteLoading:VueInfiniteLoading.default,
 }
...

Start

Grundlegende Verwendung

In diesem Beispiel erstellen wir eine einfache unendliche Liste mit den folgenden drei Schritten:

1. Verwenden Sie in Ihrer Vorlage v-for, um eine Liste zu erstellen

2. Platzieren Sie die InfiniteLoading-Komponente am Ende der Liste.

3. Setzen Sie das ref-Attribut der InfiniteLoading-Komponente auf „infiniteLoading“, da es zum Auslösen des verwendet wird Ereignis.

4. Erstellen und binden Sie eine Lade-Callback-Funktion an die InfiniteLoading-Komponente.

Vorlage

<template>
 <p>
  <p v-for="item in list">
  Line:
  <span v-text="item"></span>
  </p>
  <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">  </infinite-loading>
 </p>
</template>

Skript

import InfiniteLoading from 'vue-infinite-loading';
export default {
 data() {
  return {
   list: []
  };
 },
 methods: {
  onInfinite() {
   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);
    this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:loaded&#39;);
   }, 1000);
  }
 },
 components: {
  InfiniteLoading
 }
};

In der Funktion 8e99a69fbe029cd4e2b854e244eab143onInfinite128dba7a3a77be0113eb0bea6ea0a5d0 schieben wir jedes Mal 20 Zahlen in das Listenarray. Wir verwenden 8e99a69fbe029cd4e2b854e244eab143setTimeout128dba7a3a77be0113eb0bea6ea0a5d0, um asynchrone Anfragen zu simulieren. Vergessen Sie nicht, ein 8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0-Ereignis auszulösen, das der 8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0-Komponente mitteilt, dass die Daten erfolgreich heruntergeladen wurden.

Jetzt können wir den Effekt basierend auf dem obigen Code anzeigen.

679471b55d041765674c739a56d9a112Beispiel: Hacker-News-Listenseite94b3e26ee717c64999d7867364b1b4a3

In diesem Beispiel imitieren wir eine Hacker-News-Listenseite , verwendet aber 8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0 anstelle von 8e99a69fbe029cd4e2b854e244eab143pagination128dba7a3a77be0113eb0bea6ea0a5d0

Bevor wir mit diesem Beispiel beginnen, müssen wir Folgendes vorbereiten:

1. API zum Abrufen der Nachrichtenliste, in diesem Fall verwenden wir die HN Search API

2. Axios-Plug-in importieren, um Daten anzufordern

Vorlage

<p class="hacker-news-list">
 <p class="hacker-news-header">
  <a target="_blank" href="http://www.ycombinator.com/" rel="external nofollow" rel="external nofollow" >
   ![](https://news.ycombinator.com/y18.gif)
  </a>
  <span>Hacker News</span>
</p>
<p class="hacker-news-item" v-for="(item, key) in list">
 <span class="num" v-text="key + 1"></span>
 <p>
  <a target="_blank" :href="item.url" rel="external nofollow" rel="external nofollow" v-text="item.title"></a>
 </p>
 <p>
  <small>
   <span v-text="item.points"></span>
   points by
   <a target="_blank" :href="&#39;https://news.ycombinator.com/user?id=&#39; + item.author" rel="external nofollow" rel="external nofollow" 
    v-text="item.author"></a>
    |
   <a target="_blank" :href="&#39;https://news.ycombinator.com/item?id=&#39; + item.objectID" rel="external nofollow" rel="external nofollow" 
    v-text="item.num_comments + &#39; comments&#39;"></a>
  </small>
 </p>
</p>
 <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
 <span slot="no-more">
  There is no more Hacker News :(
 </span>
 </infinite-loading>
</p>

In der Vorlage haben wir einen Header und eine Liste für die Hacker-News-Liste erstellt. Die Komponente 8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0 wird in diesem Beispiel etwas anders verwendet als im vorherigen Beispiel. Wir haben den Eingabeaufforderungsinhalt angepasst, wenn basierend auf dem 8e99a69fbe029cd4e2b854e244eab143Slot128dba7a3a77be0113eb0bea6ea0a5d0 keine Daten mehr vorhanden sind.

Skript

import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';
const api = 'http://hn.algolia.com/api/v1/search_by_date?tags=story';
export default {
 data() {
  return {
   list: []
  };
 },
 methods: {
  onInfinite() {
   axios.get(api, {
    params: {
     page: this.list.length / 20 + 1
    }
   }).then((res) => {
    if (res.data.hits.length) {
     this.list = this.list.concat(res.data.hits);
     this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
     if (this.list.length / 20 === 3) {
      this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
     }
    } else {
     this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
    }
   });
  }
 },
 components: {
  InfiniteLoading
 }
};

In der Funktion 8e99a69fbe029cd4e2b854e244eab143onInfinite128dba7a3a77be0113eb0bea6ea0a5d0 , und schieben Sie sie jedes Mal in das Listenarray. Wenn wir drei Seiten mit Nachrichten anfordern, wird das Ereignis 8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:complete128dba7a3a77be0113eb0bea6ea0a5d0 ausgelöst, um der Komponente 8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0 mitzuteilen, dass keine weiteren Daten geladen werden müssen. Es wird der Inhalt der Eingabeaufforderung angezeigt, den wir in der Vorlage angepasst haben, um anzuzeigen, dass keine Daten mehr vorhanden sind.

Stil

.hacker-news-list .hacker-news-item {
  margin: 10px 0;
  padding: 0 10px 0 32px;
  line-height: 16px;
  font-size: 14px;
}
.hacker-news-list .hacker-news-item .num {
 margin-top: 1px;
 margin-left: -32px;
 float: left;
 width: 32px;
 color: #888;
 text-align: right;
}
.hacker-news-list .hacker-news-item p {
 padding-left: 8px;
 margin: 0;
}
.hacker-news-list .hacker-news-item .num:after {
 content: ".";
}
.hacker-news-list .hacker-news-item p>a {
 color: #333;
 padding-right: 5px;
}
.hacker-news-list .hacker-news-item p a {
 text-decoration: none;
}
.hacker-news-list .hacker-news-item p small, .hacker-news-list .hacker-news-item p small a {
 color: #888;
}

f6aae858ab9e7ef879739ead0f8fb1a3Mit Filter verwenden 6fb279ad3fd4344cbdd93aac6ad173ac

Basierend auf dem vorherigen Beispiel erstellen wir eine Dropdown-Auswahl in der Kopfzeile als Filter. Wenn wir den Filter ändern, wird die Liste neu geladen.

Vorlage

<p class="hacker-news-list">
<p class="hacker-news-header">
 <a target="_blank" href="http://www.ycombinator.com/" rel="external nofollow" rel="external nofollow" >
  ![](https://news.ycombinator.com/y18.gif)
 </a>
 <span>Hacker News</span>
 <select v-model="tag" @change="changeFilter()">
  <option value="story">Story</option>
  <option value="poll">Poll</option>
  <option value="show_hn">Show hn</option>
  <option value="ask_hn">Ask hn</option>
  <option value="front_page">Front page</option>
 </select>
</p>
<p class="hacker-news-item" v-for="(item, key) in list">
 <span class="num" v-text="key + 1"></span>
 <p>
  <a target="_blank" :href="item.url" rel="external nofollow" rel="external nofollow" v-text="item.title"></a>
 </p>
 <p>
  <small>
   <span v-text="item.points"></span>
   points by
   <a target="_blank" :href="&#39;https://news.ycombinator.com/user?id=&#39; + item.author" rel="external nofollow" rel="external nofollow" 
     v-text="item.author"></a>
   |
   <a target="_blank" :href="&#39;https://news.ycombinator.com/item?id=&#39; + item.objectID" rel="external nofollow" rel="external nofollow" 
     v-text="item.num_comments + &#39; comments&#39;"></a>
  </small>
 </p>
</p>
<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
 <span slot="no-more">
  There is no more Hacker News :(
 </span>
</infinite-loading>
</p>

Skript

import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';
const api = 'http://hn.algolia.com/api/v1/search_by_date';
export default {
 data() {
  return {
   list: [],
   tag: 'story'
  };
 },
 methods: {
  onInfinite() {
   axios.get(api, {
    params: {
     tags: this.tag,
     page: this.list.length / 20 + 1
    }
   }).then((res) => {
    if (res.data.hits.length) {
     this.list = this.list.concat(res.data.hits);
     this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
     if (this.list.length / 20 === 10) {
      this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
     }
    } else {
     this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
    }
   });
  },
  changeFilter() {
   this.list = [];
   this.$nextTick(() => {
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
   });
  }
 },
 components: {
  InfiniteLoading
 }
};

In der Funktion 8e99a69fbe029cd4e2b854e244eab143changeFilter128dba7a3a77be0113eb0bea6ea0a5d0 löschen wir die Liste und warten auf die Aktualisierung des DOM, dann lösen wir ein 8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:reset128dba7a3a77be0113eb0bea6ea0a5d0 Zu diesem Zweck wird die Komponente „InfiniteLoading“ in ihren ursprünglichen Zustand zurückversetzt und es werden sofort neue Daten angefordert.

Stil

Stil basierend auf dem vorherigen Beispiel hinzufügen

.demo-inner {
 margin-left: 20px;
 width: 261px;
 height: 455px;
 border: 1px solid #ccc;
 overflow: auto;
}
.hacker-news-list .hacker-news-header {
  padding: 2px;
  line-height: 14px;
  background-color: #f60;
}
.hacker-news-list {
 min-height: 455px;
 background-color: #f6f6ef;
}
.hacker-news-list .hacker-news-header select {
  float: right;
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  outline: none;
}

< ; p id="server">Serverseitiges Rendering94b3e26ee717c64999d7867364b1b4a3

服务端渲染(SSR)是8e99a69fbe029cd4e2b854e244eab143Vue.js2.0128dba7a3a77be0113eb0bea6ea0a5d0的新特性，当你在你的SSR应用中使用这个组件，会得到类似这样的错误：

Error: window is not defined
ReferenceError: window is not defined
  at ...
  at ...
  at e.exports (...)
  at Object. (...)
  at p (...)
  at Object.e.exports.render.e (...)
  at p (...)
  at Object. (...)
  at p (...)
  at e.__esModule.default (...)

因为8e99a69fbe029cd4e2b854e244eab143style-loader128dba7a3a77be0113eb0bea6ea0a5d0不支持在这个时候本地导出，详情点这里,所以我们需要下面的变通方案，为了你的SSR应用：

import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue';

代替

 import InfiniteLoading from 'vue-infinite-loading';

8e99a69fbe029cd4e2b854e244eab143npm install less less-loader --save-dev128dba7a3a77be0113eb0bea6ea0a5d0 如果你还没有安装它们。

然后你的SSR应用应该运行良好。如果不是，你可以加入这个issue去讨论。

74f6db73f95d6c7cf113470b60f859ff属性e388a4556c0f65e1904146cc1a846bee

on-infinite

这是一个回调函数，当滚动到距离滚动父元素底部特定距离的时候，会被调用。

通常，在数据加载完成后，你应该在这个函数中发送8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0事件。

- type      Function
- reuqired    true

distance

这是滚动的临界值。如果到滚动父元素的底部距离小于这个值，那么8e99a69fbe029cd4e2b854e244eab143on-infinite128dba7a3a77be0113eb0bea6ea0a5d0回调函数就会被调用。

- type     Number
- required   false
- default   100
- unit     pixel

spinner

通过这个属性，你可以选择一个你最喜爱旋转器作为加载动画。点击这里可以看到所有可用的旋转器。

- type     String
- required   false
- default   'default'

ref

正如你所知，这个属性是一个Vue.js的官方指令，用来获取子组件的实例。我们需要用它来得到8e99a69fbe029cd4e2b854e244eab143 InfiniteLoading 128dba7a3a77be0113eb0bea6ea0a5d0组件的实例来发送事件。你可以用这种方式来得到实例：8e99a69fbe029cd4e2b854e244eab143this.$refs[the value of ref attribute].128dba7a3a77be0113eb0bea6ea0a5d0

- type   String
- required   true

direction

如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候，调用on-infinite函数。

8e99a69fbe029cd4e2b854e244eab143警告：你必须在数据加载后，手动地将滚动父元素的scrollTop设置为正确的值，否则，该组件会一次又一次调用on-infinite函数。128dba7a3a77be0113eb0bea6ea0a5d0

- type     String
- default   'bottom'

38c38741122f26a80e2405a6b6423450事件94b3e26ee717c64999d7867364b1b4a3

8e99a69fbe029cd4e2b854e244eab143InfiniteLoading 128dba7a3a77be0113eb0bea6ea0a5d0组件将处理一下事件。如果你需要通过组件的实例来8e99a69fbe029cd4e2b854e244eab143$emit128dba7a3a77be0113eb0bea6ea0a5d0,则可以通过8e99a69fbe029cd4e2b854e244eab143ref128dba7a3a77be0113eb0bea6ea0a5d0属性来得到组件实例。

$InfiniteLoading:loaded

通常，你需要在数据加载后发送这个事件，8e99a69fbe029cd4e2b854e244eab143 InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件将隐藏加载动画，并且准备下一次触发。

$InfiniteLoading:complete

如果8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件就不会接收8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0，当你发送这个事件后，它将为用户显示一个没有结果的提示。如果8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件接收过8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0，当你发送这个事件的时候，它会为用户显示一个没有更多内容的提示。你可以利用slot来自定义需要显示的内容。

你的8e99a69fbe029cd4e2b854e244eab143onInfinite128dba7a3a77be0113eb0bea6ea0a5d0函数可能像这个样子：

onInfinite() {
  this.$http.get(url, (res) => {
  if (res.data) {
   this.list = this.list.concat(res.data);
   this.$refs[your ref attirbute's value].$emit('$InfiniteLoading:loaded');
  } else {
   this.$refs[your ref attirbute's value].$emit('$InfiniteLoading:complete');
  }
 });
}

$InfiniteLoading:reset

8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件将会回到最初的状态，并且8e99a69fbe029cd4e2b854e244eab143on-infinite128dba7a3a77be0113eb0bea6ea0a5d0函数将会立刻被调用。大部分情况下，如果你把这个组件同过滤器或制表符一起使用，这个事件还是有用的。

92d3604ac803d08d30b463039f74eda2插槽94b3e26ee717c64999d7867364b1b4a3

你可以利用8e99a69fbe029cd4e2b854e244eab143slot128dba7a3a77be0113eb0bea6ea0a5d0自定义提示的内容，当然，如果你喜欢的话，也可以使用默认内容：

 <span slot="{{ slot name }}">
  {{ Your content }}
 </span>

no-results

当8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件接收到8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:complete 128dba7a3a77be0113eb0bea6ea0a5d0事件并且它没有接收过8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0事件时，这个内容会显示出来。

- type    String
- default   No results :(

no-more

当8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件接收到8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:complete 128dba7a3a77be0113eb0bea6ea0a5d0事件并且它已经接收过8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0事件时，这个内容会出现。

spinner

如果，你不喜欢当前旋转器，你可以自定义自己的旋转器作为加载时的动画。

- type     HTML
- default   default spinner

22f5f78b10ba20c8dd94b11e3de0c231旋转器94b3e26ee717c64999d7867364b1b4a3

你可以用8e99a69fbe029cd4e2b854e244eab143spinner128dba7a3a77be0113eb0bea6ea0a5d0属性，选择你最喜爱的旋转器作为加载动画:

<infinite-loading spinner="{{ spinner name }}"></infinite-loading>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

jquery中的ajax如何返回结果而非回调方式即为同顺序执行

ajax实现点击不同的链接让返回的内容显示在特定div里

Jquery $.ajax函数外的一段代码的执行顺序

Das obige ist der detaillierte Inhalt vonvue-infinite-loading2.0 Chinesische Dokumentation, ausführliche Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!