Web項目經常會用到下拉滾動加載數據的功能，今天就來種草 Vue-infinite-loading 這個插件，講解一下使用方法！
第一步：安裝
|
1
|
npm install vue-infinite-loading --save |
第二步：引用
|
1
2
3
4
5
|
import InfiniteLoading from 'vue-infinite-loading';export default { components: { InfiniteLoading }} |
第三步：使用
1.基本用法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<template> <div> <p v-for="item in list"> <span v-text="item"></span> </p> <!--infinite-loading這個組件要放在列表的底部，滾動的盒子里面！--> <infinite-loading @infinite="infiniteHandler"></infinite-loading> </div></template><script> import InfiniteLoading from 'vue-infinite-loading'; export default { data() { return { list: [] }; }, methods: { infiniteHandler($state) { // 這里模仿加載延遲1秒鐘 setTimeout(() => { let 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(); }, 1000); }, }, components: { InfiniteLoading } }</script> |
2.分頁用法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<template> <div> <ul> <li class="hacker-news-item" v-for="(item, key) in list"></li> </ul> <infinite-loading @infinite="infiniteHandler"> <span slot="no-more">No more Data</span> </infinite-loading> </div></template> <script> import InfiniteLoading from 'vue-infinite-loading'; import axios from 'axios'; export default { data() { return { list: [] }; }, methods: { infiniteHandler($state) { let api="http://xxx.com/xxx"; // api為你請求數據地址 axios.get(api, { params: { // 頁碼參數（10條每頁） page: this.list.length / 10 + 1, }, }).then((response) => { if (response.data.length) { // response.data為你請求接口返回的數組列表 this.list = this.list.concat(response.data); $state.loaded(); if (this.list.length / 10 === 10) { // 這里是加載了10頁數據，設置不在加載 $state.complete(); } } else { $state.complete(); } }); } }, components: { InfiniteLoading } };</script> |
說明： $state: 該組件會傳遞一個特殊的事件參數$state給事件處理器來改變加載狀態，$state參數包括三個方法，它們是loaded方法，complete方法和reset方法。
- loaded方法用于在每次加載數據后停止播放動畫，然后該組件將準備好進行下一次觸發。
- complete方法用于完成完整的無限加載，則該組件將不再處理任何滾動操作。如果在loaded調用complete方法時永遠不會調用該方法，則此組件將顯示用戶的結果消息，如果不是，則將顯示不再有用戶消息，并且可以按slot設置其它內容
- reset方法是將組件返回到原來的狀態
3.條件用法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<template> <div class="hacker-news-list"> <div class="hacker-news-header"> <!--下拉改變--> <select v-model="tag" @change="changeFilter()"> <option value="story">Story</option> <option value="history">History</option> </select> <!--或者點擊改變--> <button @click="changeFilter()">搜索</button> </div> <ul> <li class="hacker-news-item" v-for="(item, key) in list"></li> </ul> <!--不要忘記設置這個 ref="infiniteLoading"--> <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading"> <span slot="no-more">No more data</span> </infinite-loading> </div></template><script> import InfiniteLoading from 'vue-infinite-loading'; import axios from 'axios'; export default { data() { return { list: [], tag: 'story', }; }, methods: { infiniteHandler($state) { const api="http://xxx.com/xxx"; // api為你請求數據地址 axios.get(api, { params: { // 改變的條件參數 tags: this.tag, page: this.list.length / 10 + 1, }, }).then(({ data }) => { if (data.result.length) { this.list = this.list.concat(data.result); $state.loaded(); if (this.list.length / 20 === 10) { state.complete(); } } else { $state.complete(); } }); }, //改變條件條用此方法 changeFilter() { this.list = []; this.$nextTick(() => { this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset'); }); }, }, components: { InfiniteLoading } }</script> |
官方鏈接：https://peachscript.github.io/vue-infinite-loading/
GitHub鏈接：https://github.com/PeachScript/vue-infinite-loading
以上就是Vue實現下拉滾動加載數據的示例的詳細內容，更多關于Vue下拉滾動加載數據的資料請關注服務器之家其它相關文章！
原文鏈接：https://www.cnblogs.com/louis-liu-oneself/p/13405299.html
