Vue向下滾動載入更多資料scroll案例詳解
阿新 • • 發佈：2021-08-12
-infinite-scroll
安裝
npm install vue-infinite-scroll --save
儘管官方也推薦了幾種載入方式，但“最vue”的方式肯定是在main.中加入
import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll)
實現範例
官方給的程式碼範例是假設你在根元件寫程式碼，實際上我們肯定是在子元件裡寫程式碼，所以程式碼也需要略作修改，下方只列有用的程式碼片段：
<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)
}
}效果
預設會載入10行資料，只要往下滾動到頁面底部，就會在1秒後再次載入10條，然後繼續滾動，又會載入10條。就如下圖：
選項解釋
v-infinite-scroll="loadMore"表示回撥函式是loadMoreinfinite-scroll-disabled="busy"http://www.cppcns.com表示由變數busy決定是否執行loadMore，false則執行loadMore，true則不執行，看清楚，busy表示繁忙，繁忙的時候是不執行的。infinite-scroll-distance="10"這裡10決定了頁面滾動到離頁尾多少畫素的時候觸發回撥函式，10是畫素值。通常我們會在頁尾做一個幾十畫素高的“正在載入中...”，這樣的話，可以把這個div的高度設為infinite-scroll-distance的值即可。
其他選項：
infinite-scroll-immediate-check預設值為true，該指令意思是，應該在繫結後立即檢查busy的值和是否滾動到底。如果你的初始內容高度不夠高、不足以填滿可滾動的容器的話，你應設為true，這樣會立即執行一次loadMore，會幫你填充一些初始內容。infinite-scroll-listen-for-event當事件在Vue例項中發出時，無限滾動將再次檢查。infinite-scroll-throttle-delay檢查busy的值的時間間隔，預設值是200，因為vue-infinite-scroll的基礎原理就是，vue-infinite-scroll會迴圈檢查busy的值，以及是否滾動到底，只有當：busy為false且滾動到底，回撥函式才會執行。
實戰應用
可以看到，上方的例子是在不斷的修改data變數，data變數的資料不斷增加，這看起來是沒錯的。但是，實戰中，我們的新資料肯定是Ajax獲取的，並不是範例中的用for迴圈來灌入無用的自然數，而且，並不需要setTimeout，我們希望的是頁面滾動到底部就立即執行Ajax，事實上，上面程式碼中的setTimeout只是為了模擬一個延遲載入的效果，並不是說必須要延遲1秒才Ajax。
實戰中該怎麼做？
只需要將這段模擬Ajax的程式碼改為真正的Ajax獲取資料的程式碼即可：
setTimeout(() => {
for (var i = 0,1000)
另外，this.busy = false也必須作為Ajax的回撥
vue-scroller
安裝
npm install vue-scroller -d
在main.js裡面使用
import VueScroller from 'vue-scroller' Vue.use(VueScroller)
使用
注意：scroller的使用最好設定一個高
<scroller style="top: 100px;" :height='400' :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
<div class="order-box" v-for="(item,index) in orderList" :key="index">
</div>
</scroller>
資料
data(){
return{
status:'all',orderList:[],page:0,all_page:1,}
},
下拉重新整理
refresh (done) {
setTimeout(()=>{
done();
},1500)
},
上拉載入更多
- 注意：done的使用，如果在資料沒有賦值到模板前就呼叫，就會一直觸發下拉函式，所以我們要在請求成功的回撥中模板賦值後呼叫
- 下拉的函式是繫結屬性的方式繫結在scroller標籤上的，所以我們不需要在created裡面呼叫一次請求函式，頁面初始化的時候回自動呼叫一次下拉的函式，從而獲取到第一頁的資料
//下拉觸發
infinite (done) {
if(this.page>=this.all_page){
setTimeout(()=>{
this.$refs.myscroller.finishInfinite(true);
},1500)
}else{
setTimeout(()=>{
this.page++;
this.getorderList(done)
},500);
}
},getymHzVorderList(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.page
this.all_page = res.data.data.all_page
done();
}else{
}
})
},
注意
如果涉及到tab欄切換，需要重新設定scroller的狀態.finishInfinite(false)引數為false時會從新呼叫一次上拉函式，從而重置當前scroller的狀態
goodsAll(){
this.status = 'all'
this.page = 0
this.all_page = 1
this.$refs.myscroller.finishInfinite(false);
this.orderList = []
},
triggerPullToRefresh() 觸發下拉重新整理
finishPullToRefresh() 完成下拉重新整理
this.$refs.my_scroller.finishInfinite(false)
finishInfinite(isNoMoreData :Boolean) 當引數為false時，上拉獲取資料可以重新呼叫。當引數為true，上拉獲取資料回撥函式停止使用,下拉下部不再顯示loading，會顯示‘'暫無更多資料
vue-infinite-loading
安裝
npm install vue-infinite-loading --save
元件內使用
// 元件類使用
import InfiniteLoading from 'vue-infinite-loading';
export default {
components: { InfiniteLoading }
}
//使用 基礎版
<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=":;" 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這個元件要放在列表的底部，滾動的盒子裡面！-->
<infinite-loading
spinner="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="script:;" 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(),// 重置滾動狀態 改變
page: 1, list: []
};
}, methods: {
// 重置滾動狀態
rest(){
this.list = [];
this.page = 1;
this.infiniteId += 1;
}, async infiniteHandler($state) {
// 模仿請求資料
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>
分頁用法
<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方法是將元件返回到原來的狀態
條件用法
<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 http://www.cppcns.com'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>
防抖
import { debounce } from "lodash"; // 防抖
// 防抖
get: debounce(async function () {
let k = await this.$axios.getList_API();
console.log(k,"防抖版");
},1000),
到此這篇關於Vue向下滾動載入更多資料-scroll-案例的文章就介紹到這了,更多相關Vue載入資料內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！