Web項(xiàng)目經(jīng)常會(huì)用到下拉滾動(dòng)加載數(shù)據(jù)的功能，今天就來(lái)種草 Vue-infinite-loading 這個(gè)插件，講解一下使用方法！

第一步：安裝

npm install vue-infinite-loading --save第二步：引用

import InfiniteLoading from ’vue-infinite-loading’;export default { components: { InfiniteLoading }}第三步：使用

1.基本用法

<template><div> <p v-for='item in list'><span v-text='item'></span> </p> <!--infinite-loading這個(gè)組件要放在列表的底部，滾動(dòng)的盒子里面！--> <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.分頁(yè)用法

<template> <div> <ul> <li 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為你請(qǐng)求數(shù)據(jù)地址 axios.get(api, { params: {// 頁(yè)碼參數(shù)（10條每頁(yè)） page: this.list.length / 10 + 1, }, }).then((response) => { if (response.data.length) {// response.data為你請(qǐng)求接口返回的數(shù)組列表 this.list = this.list.concat(response.data); $state.loaded(); if (this.list.length / 10 === 10) { // 這里是加載了10頁(yè)數(shù)據(jù)，設(shè)置不在加載 $state.complete(); } } else { $state.complete(); } }); } }, components: { InfiniteLoading } };</script>

說(shuō)明： $state: 該組件會(huì)傳遞一個(gè)特殊的事件參數(shù)$state給事件處理器來(lái)改變加載狀態(tài)，$state參數(shù)包括三個(gè)方法，它們是loaded方法，complete方法和reset方法。

loaded方法用于在每次加載數(shù)據(jù)后停止播放動(dòng)畫(huà)，然后該組件將準(zhǔn)備好進(jìn)行下一次觸發(fā)。 complete方法用于完成完整的無(wú)限加載，則該組件將不再處理任何滾動(dòng)操作。如果在loaded調(diào)用complete方法時(shí)永遠(yuǎn)不會(huì)調(diào)用該方法，則此組件將顯示用戶的結(jié)果消息，如果不是，則將顯示不再有用戶消息，并且可以按slot設(shè)置其它內(nèi)容 reset方法是將組件返回到原來(lái)的狀態(tài)

3.條件用法

<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> <!--或者點(diǎn)擊改變--> <button @click='changeFilter()'>搜索</button> </div> <ul> <li v-for='(item, key) in list'></li> </ul> <!--不要忘記設(shè)置這個(gè) 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為你請(qǐng)求數(shù)據(jù)地址 axios.get(api, { params: {// 改變的條件參數(shù) 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實(shí)現(xiàn)下拉滾動(dòng)加載數(shù)據(jù)的示例的詳細(xì)內(nèi)容，更多關(guān)于Vue下拉滾動(dòng)加載數(shù)據(jù)的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！