vue-infinite-loading2.0 중국어 문서 자세한 설명-JS 튜토리얼-php.cn

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

소개

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

기능

모바일 친화적 지원
모든 스크롤 가능한 요소와 호환
로딩 애니메이션으로 사용할 수 있는 다양한 스피너가 있습니다
로딩 후 결과 표시 지원
양방향 무한 로딩 지원

Installation

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

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

로그인 후 복사

기타 방법

로그인 후 복사

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

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

로그인 후 복사

Start

기본 사용법

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

템플릿에서 v-for를 사용하여 목록을 만듭니다
InfiniteLoading 구성 요소를 목록 하단에 배치합니다.
이벤트를 트리거하는 데 사용되는 InfiniteLoading 구성 요소의 ref 속성을 InfiniteLoading으로 설정합니다.
로딩 콜백 함수를 생성하고 InfiniteLoading 구성 요소에 바인딩합니다.

Template

로그인 후 복사

Script

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('$InfiniteLoading:loaded'); }, 1000); } }, components: { InfiniteLoading } };

로그인 후 복사

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

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

예: 해커 뉴스 목록 페이지

이 예에서는 해커 뉴스 목록 페이지를 모방하지만InfiniteLoading< 교체페이지 매김

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

API, 이 예제에서는 HN Search API
Axios 플러그인 가져오기를 사용합니다. 요청 데이터

Template

 
  ![](https://news.ycombinator.com/y18.gif)  Hacker News 
   
  
    points by  |   
 
   There is no more Hacker News :(

로그인 후 복사

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

Script

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

로그인 후 복사

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

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

로그인 후 복사

필터와 함께 사용

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

Template

 
  ![](https://news.ycombinator.com/y18.gif)  Hacker News  
   
  
    points by  |   
 
   There is no more Hacker News :(

로그인 후 복사

Script

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

로그인 후 복사

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

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

로그인 후 복사

서버 측 렌더링

服务端渲染(SSR)是Vue.js2.0的新特性，当你在你的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 (...)

로그인 후 복사

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

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

로그인 후 복사

代替

import InfiniteLoading from 'vue-infinite-loading';

로그인 후 복사

npm install less less-loader --save-dev如果你还没有安装它们。

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

属性

on-infinite

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

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

- type Function - reuqired true

로그인 후 복사

distance

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

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

로그인 후 복사

spinner

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

- type String - required false - default 'default'

로그인 후 복사

ref

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

- type String - required true

로그인 후 복사

direction

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

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

- type String - default 'bottom'

로그인 후 복사

事件

InfiniteLoading组件将处理一下事件。如果你需要通过组件的实例来$emit,则可以通过ref属性来得到组件实例。

$InfiniteLoading:loaded

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

$InfiniteLoading:complete

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

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

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

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

插槽

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