vue-infinite-scroll

安裝

npm install vue-infinite-scroll --save

盡管官方也推薦了幾種載入方式，但“最vue”的方式肯定是在main.js中加入

import infiniteScroll from ’vue-infinite-scroll’Vue.use(infiniteScroll)實(shí)現(xiàn)范例

官方給的代碼范例是假設(shè)你在根組件寫(xiě)代碼，實(shí)際上我們肯定是在子組件里寫(xiě)代碼，所以代碼也需要略作修改，下方只列有用的代碼片段：

<div v-infinite-scroll='loadMore' infinite-scroll-disabled='busy' infinite-scroll-distance='10'> <div v-for='item in data' :key='item.index'>{{item.name}}</div></div>

data () { return { count: 0, data: [], busy: false } }

methods: { loadMore: function() { this.busy = true setTimeout(() => {for (var i = 0, j = 10; i < j; i++) { this.data.push({name: this.count++ })}console.log(this.data)this.busy = false }, 1000) } }

效果

默認(rèn)會(huì)載入10行數(shù)據(jù)，只要往下滾動(dòng)到頁(yè)面底部，就會(huì)在1秒后再次加載10條，然后繼續(xù)滾動(dòng)，又會(huì)加載10條。就如下圖：

選項(xiàng)解釋 v-infinite-scroll='loadMore'表示回調(diào)函數(shù)是loadMore infinite-scroll-disabled='busy'表示由變量busy決定是否執(zhí)行l(wèi)oadMore，false則執(zhí)行l(wèi)oadMore，true則不執(zhí)行，看清楚，busy表示繁忙，繁忙的時(shí)候是不執(zhí)行的。 infinite-scroll-distance='10'這里10決定了頁(yè)面滾動(dòng)到離頁(yè)尾多少像素的時(shí)候觸發(fā)回調(diào)函數(shù)，10是像素值。通常我們會(huì)在頁(yè)尾做一個(gè)幾十像素高的“正在加載中...”，這樣的話，可以把這個(gè)div的高度設(shè)為infinite-scroll-distance的值即可。

其他選項(xiàng)：

infinite-scroll-immediate-check 默認(rèn)值為true，該指令意思是，應(yīng)該在綁定后立即檢查busy的值和是否滾動(dòng)到底。如果你的初始內(nèi)容高度不夠高、不足以填滿可滾動(dòng)的容器的話，你應(yīng)設(shè)為true，這樣會(huì)立即執(zhí)行一次loadMore，會(huì)幫你填充一些初始內(nèi)容。 infinite-scroll-listen-for-event 當(dāng)事件在Vue實(shí)例中發(fā)出時(shí)，無(wú)限滾動(dòng)將再次檢查。 infinite-scroll-throttle-delay 檢查busy的值的時(shí)間間隔，默認(rèn)值是200，因?yàn)関ue-infinite-scroll的基礎(chǔ)原理就是，vue-infinite-scroll會(huì)循環(huán)檢查busy的值，以及是否滾動(dòng)到底，只有當(dāng)：busy為false且滾動(dòng)到底，回調(diào)函數(shù)才會(huì)執(zhí)行。實(shí)戰(zhàn)應(yīng)用

可以看到，上方的例子是在不斷的修改data變量，data變量的數(shù)據(jù)不斷增加，這看起來(lái)是沒(méi)錯(cuò)的。但是，實(shí)戰(zhàn)中，我們的新數(shù)據(jù)肯定是Ajax獲取的，并不是范例中的用for循環(huán)來(lái)灌入無(wú)用的自然數(shù)，而且，并不需要setTimeout，我們希望的是頁(yè)面滾動(dòng)到底部就立即執(zhí)行Ajax，事實(shí)上，上面代碼中的setTimeout只是為了模擬一個(gè)延遲加載的效果，并不是說(shuō)必須要延遲1秒才Ajax。

實(shí)戰(zhàn)中該怎么做？

只需要將這段模擬Ajax的代碼改為真正的Ajax獲取數(shù)據(jù)的代碼即可：

setTimeout(() => {for (var i = 0, j = 10; i < j; i++) { this.data.push({name: this.count++ })}console.log(this.data)this.busy = false }, 1000)

另外，this.busy = false也必須作為Ajax的回調(diào)

vue-scroller

安裝

npm install vue-scroller -d

在main.js里面使用

import VueScroller from ’vue-scroller’Vue.use(VueScroller)

使用

注意：scroller的使用最好設(shè)置一個(gè)高

<scroller :height=’400’ :on-refresh='refresh' :on-infinite='infinite' ref='myscroller'> <div v-for='(item,index) in orderList' :key='index'> </div> </scroller>

數(shù)據(jù)

data(){ return{status:’all’,orderList:[],page:0,all_page:1, }},

下拉刷新

refresh (done) {setTimeout(()=>{ done();},1500) },

上拉加載更多

注意：done的使用，如果在數(shù)據(jù)沒(méi)有賦值到模板前就調(diào)用，就會(huì)一直觸發(fā)下拉函數(shù)，所以我們要在請(qǐng)求成功的回調(diào)中模板賦值后調(diào)用 下拉的函數(shù)是綁定屬性的方式綁定在scroller標(biāo)簽上的，所以我們不需要在created里面調(diào)用一次請(qǐng)求函數(shù)，頁(yè)面初始化的時(shí)候回自動(dòng)調(diào)用一次下拉的函數(shù)，從而獲取到第一頁(yè)的數(shù)據(jù)

//下拉觸發(fā) infinite (done) {if(this.page>=this.all_page){ setTimeout(()=>{this.$refs.myscroller.finishInfinite(true); },1500)}else{setTimeout(()=>{this.page++;this.getorderList(done) },500);} }, getorderList(done){this.$http({ method:’post’, url:’/seckill/server/orderList’, data:{jwt:this.jwt,status:this.status,page:this.page,page_size:5 }}).then(res=>{ if(res.data.code == 0){ this.orderList.push.apply(this.orderList,res.data.data.list)this.$refs.myscroller.finishInfinite(true) this.page = res.data.data.pagethis.all_page = res.data.data.all_pagedone(); }else{ }}) },

注意

如果涉及到tab欄切換，需要重新設(shè)置scroller的狀態(tài).finishInfinite(false)參數(shù)為false時(shí)會(huì)從新調(diào)用一次上拉函數(shù)，從而重置當(dāng)前scroller的狀態(tài)

goodsAll(){this.status = ’all’this.page = 0this.all_page = 1this.$refs.myscroller.finishInfinite(false);this.orderList = [] },

triggerPullToRefresh() 觸發(fā)下拉刷新

finishPullToRefresh() 完成下拉刷新

this.$refs.my_scroller.finishInfinite(false)finishInfinite(isNoMoreData :Boolean) 當(dāng)參數(shù)為false時(shí)，上拉獲取數(shù)據(jù)可以重新調(diào)用。當(dāng)參數(shù)為true，上拉獲取數(shù)據(jù)回調(diào)函數(shù)停止使用,下拉下部不再顯示loading，會(huì)顯示‘’暫無(wú)更多數(shù)據(jù)

vue-infinite-loading

安裝

npm install vue-infinite-loading --save

組件內(nèi)使用

// 組件類(lèi)使用import InfiniteLoading from ’vue-infinite-loading’; export default { components: { InfiniteLoading }} //使用 基礎(chǔ)版<infinite-loading spinner='spiral' @infinite='infiniteHandler' :distance='200' class='infinite-loading-wrap'> <!-- <div slot='spinner'>Loading...</div> --> <div slot='no-more'>No more Data</div> <div slot='no-results'>No results Data</div> <!-- <div slot='error' slot-scope='{ trigger }'>Error Data, click <a href='javascript:;' rel='external nofollow' rel='external nofollow' @click='trigger'>here</a> toretry </div> --></infinite-loading>

基本用法

<template><div> <p v-for='(item,index) in list' :key='index'><span v-text='item'></span> </p> <!--infinite-loading這個(gè)組件要放在列表的底部，滾動(dòng)的盒子里面！--><infinite-loadingspinner='spiral'@infinite='infiniteHandler':identifier='infiniteId':distance='200'class='infinite-loading-wrap'><div slot='spinner'>Loading...</div><div slot='no-more'>No more Data</div><div slot='no-results'>No results Data</div><div slot='error' slot-scope='{ trigger }'> Error Data, click <a href='javascript:;' rel='external nofollow' rel='external nofollow' @click='trigger'>here</a> toretry</div></infinite-loading></div></template> <script>import InfiniteLoading from ’vue-infinite-loading’;export default { data() { return { infiniteId: +new Date(), // 重置滾動(dòng)狀態(tài) 改變 page: 1, list: [] }; }, methods: {// 重置滾動(dòng)狀態(tài)rest(){ this.list = []; this.page = 1; this.infiniteId += 1;}, async infiniteHandler($state) {// 模仿請(qǐng)求數(shù)據(jù)const res = await this.$axios.workList({ page: this.page, pagesize: 20 }); if (res.data.list.length) {this.page += 1;this.list = this.list.concat(res.data.list);$state.loaded(); } else {$state.complete(); } // 這里模仿加載延遲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>

分頁(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)

條件用法

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

防抖

import { debounce } from 'lodash'; // 防抖 // 防抖get: debounce(async function () { let k = await this.$axios.getList_API(); console.log(k, '防抖版');}, 1000),

到此這篇關(guān)于Vue向下滾動(dòng)加載更多數(shù)據(jù)-scroll-案例的文章就介紹到這了,更多相關(guān)Vue加載數(shù)據(jù)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！