vue-infinite-loading2.0使用說明
May 02, 2018 am 09:41 AM這次帶給大家vue-infinite-loading2.0使用說明，vue-infinite-loading2.0使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
簡介
這是一個使用在Vue.js中的無限滾動插件，它可以幫助你快速建立一個無限滾動列表。
特點
行動端支援友善
相容於任何一個可以捲動的元素
有不同的旋轉器可以作為載入動畫
支援載入後顯示結果
支援兩個方向的無限載入
<p id="installation">安裝</p>
<strong>注意：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，請安裝vue-infinite-loading1.3版本</strong>
npm install vue-infinite-loading --save
#導入方式
#es6模組導入方式
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,
}
...開始
##基礎使用##在本例中，我們將創建一個基本的無限列表,有以下三個步驟：
- 在你的模板中，用v-for創建一個列表
- 將InfiniteLoading元件放在清單的底部；
- 將InfiniteLoading元件的ref屬性設為infiniteLoading，因為要用它來觸發事件。
- 為InfiniteLoading元件建立並綁定一個載入
- 回呼函數
<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>
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
}
};
現在，我們可以根據上面的程式碼，來顯示效果。
<p id="hacker">範例：駭客新聞清單頁面</p>在這個範例中，我們將模仿一個駭客新聞列表頁面，但會用<strong>InfiniteLoading</strong>代替<strong>分頁</strong>
在開始這個例子之前，我們需要準備以下內容：
- 取得新聞清單的API,在本例中我們使用HN Search API
- #匯入axios外掛程式來請求資料
<p class="hacker-news-list">
<p class="hacker-news-header">
<a target="_blank" href="http://www.ycombinator.com/" rel="external nofollow" rel="external nofollow" >
</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="'https://news.ycombinator.com/user?id=' + item.author" rel="external nofollow" rel="external nofollow"
v-text="item.author"></a>
|
<a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID" rel="external nofollow" rel="external nofollow"
v-text="item.num_comments + ' comments'"></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>
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
}
};
.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;
}
# 在上个例子的基础上，我们将在头部创建一个下拉选择作为过滤器，当我们改变过滤器，列表将会重新加载。 Template Script 在<strong>changeFilter</strong>函数中，我们清楚了列表并等待DOM更新，然后我们触发一个<strong>$InfiniteLoading:reset</strong>事件，目的是让<strong> InfiniteLoading </strong>组件回到最初状态，它将立刻请求新的数据。 Style 在上个例子基础上增加样式 <p id="server">服务端渲染</p> 服务端渲染(SSR)是<strong>Vue.js2.0</strong>的新特性，当你在你的SSR应用中使用这个组件，会得到类似这样的错误： 因为<strong>style-loader</strong>不支持在这个时候本地导出，详情点这里,所以我们需要下面的变通方案，为了你的SSR应用： 代替 <strong>npm install less less-loader --save-dev</strong> 如果你还没有安装它们。 然后你的SSR应用应该运行良好。如果不是，你可以加入这个issue去讨论。 <p id="properties">属性<p> on-infinite 这是一个回调函数，当滚动到距离滚动父元素底部特定距离的时候，会被调用。 通常，在数据加载完成后，你应该在这个函数中发送<strong>$InfiniteLoading:loaded</strong>事件。 distance 这是滚动的临界值。如果到滚动父元素的底部距离小于这个值，那么<strong>on-infinite</strong>回调函数就会被调用。 spinner 通过这个属性，你可以选择一个你最喜爱旋转器作为加载动画。点击这里可以看到所有可用的旋转器。 ref 正如你所知，这个属性是一个Vue.js的官方指令，用来获取子组件的实例。我们需要用它来得到<strong> InfiniteLoading </strong>组件的实例来发送事件。你可以用这种方式来得到实例：<strong>this.$refs[the value of ref attribute].</strong> direction 如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候，调用on-infinite函数。 <strong>警告：你必须在数据加载后，手动地将滚动父元素的scrollTop设置为正确的值，否则，该组件会一次又一次调用on-infinite函数。</strong> <p id="event">事件</p> <strong>InfiniteLoading </strong>组件将处理一下事件。如果你需要通过组件的实例来<strong>$emit</strong>,则可以通过<strong>ref</strong>属性来得到组件实例。 $InfiniteLoading:loaded 通常，你需要在数据加载后发送这个事件，<strong> InfiniteLoading</strong>组件将隐藏加载动画，并且准备下一次触发。 $InfiniteLoading:complete 如果<strong>InfiniteLoading</strong>组件就不会接收<strong>$InfiniteLoading:loaded</strong>，当你发送这个事件后，它将为用户显示一个没有结果的提示。如果<strong>InfiniteLoading</strong>组件接收过<strong>$InfiniteLoading:loaded</strong>，当你发送这个事件的时候，它会为用户显示一个没有更多内容的提示。你可以利用slot来自定义需要显示的内容。 你的<strong>onInfinite</strong>函数可能像这个样子： $InfiniteLoading:reset <strong>InfiniteLoading</strong>组件将会回到最初的状态，并且<strong>on-infinite</strong>函数将会立刻被调用。大部分情况下，如果你把这个组件同过滤器或制表符一起使用，这个事件还是有用的。 <p id="slots">插槽</p> 你可以利用<strong>slot</strong>自定义提示的内容，当然，如果你喜欢的话，也可以使用默认内容： no-results 当<strong>InfiniteLoading</strong>组件接收到<strong>$InfiniteLoading:complete </strong>事件并且它没有接收过<strong>$InfiniteLoading:loaded</strong>事件时，这个内容会显示出来。 no-more 当<strong>InfiniteLoading</strong>组件接收到<strong>$InfiniteLoading:complete </strong>事件并且它已经接收过<strong>$InfiniteLoading:loaded</strong>事件时，这个内容会出现。 spinner 如果，你不喜欢当前旋转器，你可以自定义自己的旋转器作为加载时的动画。 <p id="spinners">旋转器</p> 你可以用<strong>spinner</strong>属性，选择你最喜爱的旋转器作为加载动画: 点击这里可以查看几个可用的旋转器。 相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！ 推荐阅读：<p class="hacker-news-list">
<p class="hacker-news-header">
<a target="_blank" href="http://www.ycombinator.com/" rel="external nofollow" rel="external nofollow" >
</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="'https://news.ycombinator.com/user?id=' + item.author" rel="external nofollow" rel="external nofollow"
v-text="item.author"></a>
|
<a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID" rel="external nofollow" rel="external nofollow"
v-text="item.num_comments + ' comments'"></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>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
}
};.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;
}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 (...)
import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue';
import InfiniteLoading from 'vue-infinite-loading';
- type Function
- reuqired true
- type Number
- required false
- default 100
- unit pixel
- type String
- required false
- default 'default'
- type String
- required true
- type String
- default 'bottom'
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');
}
});
} <span slot="{{ slot name }}">
{{ Your content }}
</span>- type String
- default No results :(
- type HTML
- default default spinner
<infinite-loading spinner="{{ spinner name }}"></infinite-loading>
以上是vue-infinite-loading2.0使用說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱門文章
熱門文章
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
