찾다

집 >웹 프론트엔드 >JS 튜토리얼 >vue-infinite-loading2.0 중국어 문서 자세한 설명

vue-infinite-loading2.0 중국어 문서 자세한 설명

亚连
亚连원래의
2018-05-26 09:55:011812검색

이 글은 주로 vue-infinite-loading2.0 중국어 문서에 대한 자세한 설명을 소개하고 있으니 참고하시기 바랍니다.

소개

Vue.js에서 사용되는 무한 스크롤 플러그인으로, 무한 스크롤 목록을 빠르게 생성할 수 있도록 도와줍니다.

기능

  1. 모바일 친화적 지원

  2. 모든 스크롤 가능한 요소와 호환

  3. 로딩 애니메이션으로 사용할 수 있는 다양한 스피너가 있습니다

  4. 로딩 후 결과 표시 지원

  5. 양방향 무한 로딩 지원

9edcdb420db994b8fec71e3b24005d92Installation94b3e26ee717c64999d7867364b1b4a3

8e99a69fbe029cd4e2b854e244eab143참고: vue-infinite-loading2.0은 Vue.js2에서만 사용할 수 있습니다. .0에서 사용됩니다. Vue.js1.0에서 사용하고 싶다면 vue-infinite-loading1.3 버전128dba7a3a77be0113eb0bea6ea0a5d0

npm install vue-infinite-loading --save

Import method

es6 module import method

import InfiniteLoading from 'vue-infinite-loading';
export default {
 components: {
  InfiniteLoading,
 },
};
을 설치해주세요.

CommonJS 모듈 가져오기 방법

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

기타 방법

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

vue-infinite-loading.js은 다음과 같이 사용해야 하는 전역 변수 VueInfiniteLoading을 등록합니다.

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

Start

기본 사용법

이 예에서는 기본 무한 목록을 만듭니다. 세 단계로 구성됩니다.

  1. 템플릿에서 v-for를 사용하여 목록을 만듭니다

  2. InfiniteLoading 구성 요소를 목록 하단에 배치합니다.

  3. 이벤트를 트리거하는 데 사용되는 InfiniteLoading 구성 요소의 ref 속성을 InfiniteLoading으로 설정합니다.

  4. 로딩 콜백 함수를 생성하고 InfiniteLoading 구성 요소에 바인딩합니다.

Template

<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>

Script

import InfiniteLoading from &#39;vue-infinite-loading&#39;;
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
 }
};

8e99a69fbe029cd4e2b854e244eab143onInfinite128dba7a3a77be0113eb0bea6ea0a5d0 함수에서는 숫자가 0일 때마다 2를 입력합니다. 목록 배열에 넣습니다. 비동기 요청을 시뮬레이션하기 위해 8e99a69fbe029cd4e2b854e244eab143setTimeout128dba7a3a77be0113eb0bea6ea0a5d0을 사용합니다. 마지막으로, 데이터가 성공적으로 다운로드되었음을 8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0 구성요소에 알리는 8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0 이벤트를 트리거하는 것을 잊지 마세요.

이제 위 코드를 기반으로 효과를 보여줄 수 있습니다.

679471b55d041765674c739a56d9a112예: 해커 뉴스 목록 페이지94b3e26ee717c64999d7867364b1b4a3

이 예에서는 해커 뉴스 목록 페이지를 모방하지만 8e99a69fbe029cd4e2b854e244eab143InfiniteLoading< 교체8e99a69fbe029cd4e2b854e244eab143페이지 매김128dba7a3a77be0113eb0bea6ea0a5d0

이 예제를 시작하기 전에 다음을 준비해야 합니다: 뉴스 목록을 가져오기 위한

  1. API, 이 예제에서는 HN Search API

  2. Axios 플러그인 가져오기를 사용합니다. 요청 데이터

Template

<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>

템플릿에서 해커 뉴스 목록에 대한 헤더와 목록을 만들었습니다. 이 예제의 8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0 구성요소는 이전 예제와 약간 다르게 사용됩니다. 8e99a69fbe029cd4e2b854e244eab143슬롯128dba7a3a77be0113eb0bea6ea0a5d0을 기준으로 더 이상 데이터가 없을 때 프롬프트 내용을 맞춤설정했습니다.

Script

import InfiniteLoading from &#39;vue-infinite-loading&#39;;
import axios from &#39;axios&#39;;
const api = &#39;http://hn.algolia.com/api/v1/search_by_date?tags=story&#39;;
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(&#39;$InfiniteLoading:loaded&#39;);
     if (this.list.length / 20 === 3) {
      this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:complete&#39;);
     }
    } else {
     this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:complete&#39;);
    }
   });
  }
 },
 components: {
  InfiniteLoading
 }
};

8e99a69fbe029cd4e2b854e244eab143onInfinite128dba7a3a77be0113eb0bea6ea0a5d0 함수에서는 매번 뉴스 페이지를 요청하고 이를 목록 배열에 푸시합니다. 3페이지의 뉴스를 요청하면 8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:complete128dba7a3a77be0113eb0bea6ea0a5d0 이벤트가 트리거되어 8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0 요소에 더 이상 로드할 데이터가 없음을 알립니다. 더 이상 데이터가 없음을 나타내기 위해 템플릿에서 사용자 정의한 프롬프트 콘텐츠가 표시됩니다.

Style

.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;
}

f6aae858ab9e7ef879739ead0f8fb1a3필터와 함께 사용94b3e26ee717c64999d7867364b1b4a3

이전 예를 바탕으로 헤더 A 드롭다운 선택 항목에 생성하겠습니다. 필터 역할을 하며, 필터를 변경하면 목록이 다시 로드됩니다.

Template

<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>

Script

import InfiniteLoading from &#39;vue-infinite-loading&#39;;
import axios from &#39;axios&#39;;
const api = &#39;http://hn.algolia.com/api/v1/search_by_date&#39;;
export default {
 data() {
  return {
   list: [],
   tag: &#39;story&#39;
  };
 },
 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(&#39;$InfiniteLoading:loaded&#39;);
     if (this.list.length / 20 === 10) {
      this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:complete&#39;);
     }
    } else {
     this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:complete&#39;);
    }
   });
  },
  changeFilter() {
   this.list = [];
   this.$nextTick(() => {
    this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:reset&#39;);
   });
  }
 },
 components: {
  InfiniteLoading
 }
};

8e99a69fbe029cd4e2b854e244eab143changeFilter128dba7a3a77be0113eb0bea6ea0a5d0 함수에서 목록을 지우고 DOM이 업데이트될 때까지 기다립니다. < ;strong>$InfiniteLoading:reset128dba7a3a77be0113eb0bea6ea0a5d0 이벤트의 목적은 8e99a69fbe029cd4e2b854e244eab143 InfiniteLoading 128dba7a3a77be0113eb0bea6ea0a5d0 구성 요소를 원래 상태로 되돌리는 것이며 즉시 새 데이터를 요청합니다.

Style

이전 예를 기반으로 스타일 추가

.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;
}

f870f7f2d154ed98d414eacf25a4d171서버 측 렌더링94b3e26ee717c64999d7867364b1b4a3

服务端渲染(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 &#39;vue-infinite-loading/src/components/Infiniteloading.vue&#39;;

代替

 import InfiniteLoading from &#39;vue-infinite-loading&#39;;

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   &#39;default&#39;

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   &#39;bottom&#39;

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&#39;s value].$emit(&#39;$InfiniteLoading:loaded&#39;);
  } else {
   this.$refs[your ref attirbute&#39;s value].$emit(&#39;$InfiniteLoading:complete&#39;);
  }
 });
}

$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函数外的一段代码的执行顺序

위 내용은 vue-infinite-loading2.0 중국어 문서 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jQuery 콘텐츠 필터를 사용하는 방법다음 기사：jQuery 콘텐츠 필터를 사용하는 방법

관련 기사

더보기