Vue向下滾動加載更多數(shù)據(jù)scroll案例詳解
更新時間：2021年08月11日 11:11:56 作者：JackieDYH
這篇文章主要介紹了Vue向下滾動加載更多數(shù)據(jù)scroll案例詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
vue-infinite-scroll
安裝
npm install vue-infinite-scroll --save
盡管官方也推薦了幾種載入方式，但“最vue”的方式肯定是在main.js中加入
import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll)
實現(xiàn)范例
官方給的代碼范例是假設你在根組件寫代碼，實際上我們肯定是在子組件里寫代碼，所以代碼也需要略作修改，下方只列有用的代碼片段：
<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行數(shù)據(jù)，只要往下滾動到頁面底部，就會在1秒后再次加載10條，然后繼續(xù)滾動，又會加載10條。就如下圖：
選項解釋
v-infinite-scroll="loadMore"表示回調函數(shù)是loadMoreinfinite-scroll-disabled="busy"表示由變量busy決定是否執(zhí)行loadMore，false則執(zhí)行loadMore，true則不執(zhí)行，看清楚，busy表示繁忙，繁忙的時候是不執(zhí)行的。infinite-scroll-distance="10"這里10決定了頁面滾動到離頁尾多少像素的時候觸發(fā)回調函數(shù)，10是像素值。通常我們會在頁尾做一個幾十像素高的“正在加載中...”，這樣的話，可以把這個div的高度設為infinite-scroll-distance的值即可。
其他選項：
infinite-scroll-immediate-check默認值為true，該指令意思是，應該在綁定后立即檢查busy的值和是否滾動到底。如果你的初始內容高度不夠高、不足以填滿可滾動的容器的話，你應設為true，這樣會立即執(zhí)行一次loadMore，會幫你填充一些初始內容。infinite-scroll-listen-for-event當事件在Vue實例中發(fā)出時，無限滾動將再次檢查。infinite-scroll-throttle-delay檢查busy的值的時間間隔，默認值是200，因為vue-infinite-scroll的基礎原理就是，vue-infinite-scroll會循環(huán)檢查busy的值，以及是否滾動到底，只有當：busy為false且滾動到底，回調函數(shù)才會執(zhí)行。
實戰(zhàn)應用
可以看到，上方的例子是在不斷的修改data變量，data變量的數(shù)據(jù)不斷增加，這看起來是沒錯的。但是，實戰(zhàn)中，我們的新數(shù)據(jù)肯定是Ajax獲取的，并不是范例中的用for循環(huán)來灌入無用的自然數(shù)，而且，并不需要setTimeout，我們希望的是頁面滾動到底部就立即執(zhí)行Ajax，事實上，上面代碼中的setTimeout只是為了模擬一個延遲加載的效果，并不是說必須要延遲1秒才Ajax。
實戰(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的回調
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>
數(shù)據(jù)
data(){
return{
status:'all',
orderList:[],
page:0,
all_page:1,
}
},
下拉刷新
refresh (done) {
setTimeout(()=>{
done();
},1500)
},
上拉加載更多
- 注意：done的使用，如果在數(shù)據(jù)沒有賦值到模板前就調用，就會一直觸發(fā)下拉函數(shù)，所以我們要在請求成功的回調中模板賦值后調用
- 下拉的函數(shù)是綁定屬性的方式綁定在scroller標簽上的，所以我們不需要在created里面調用一次請求函數(shù)，頁面初始化的時候回自動調用一次下拉的函數(shù)，從而獲取到第一頁的數(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.page
this.all_page = res.data.data.all_page
done();
}else{
}
})
},
注意
如果涉及到tab欄切換，需要重新設置scroller的狀態(tài).finishInfinite(false)參數(shù)為false時會從新調用一次上拉函數(shù)，從而重置當前scroller的狀態(tài)
goodsAll(){
this.status = 'all'
this.page = 0
this.all_page = 1
this.$refs.myscroller.finishInfinite(false);
this.orderList = []
},
triggerPullToRefresh() 觸發(fā)下拉刷新
finishPullToRefresh() 完成下拉刷新
this.$refs.my_scroller.finishInfinite(false)
finishInfinite(isNoMoreData :Boolean) 當參數(shù)為false時，上拉獲取數(shù)據(jù)可以重新調用。當參數(shù)為true，上拉獲取數(shù)據(jù)回調函數(shù)停止使用,下拉下部不再顯示loading，會顯示‘'暫無更多數(shù)據(jù)
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="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這個組件要放在列表的底部，滾動的盒子里面！-->
<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="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(), // 重置滾動狀態(tài) 改變
page: 1,
list: []
};
},
methods: {
// 重置滾動狀態(tài)
rest(){
this.list = [];
this.page = 1;
this.infiniteId += 1;
},
async infiniteHandler($state) {
// 模仿請求數(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>
分頁用法
<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為你請求數(shù)據(jù)地址
axios
.get(api, {
params: {
// 頁碼參數(shù)（10條每頁）
page: this.list.length / 10 + 1,
},
})
.then((response) => {
if (response.data.length) {
// response.data為你請求接口返回的數(shù)組列表
this.list = this.list.concat(response.data);
$state.loaded();
if (this.list.length / 10 === 10) {
// 這里是加載了10頁數(shù)據(jù)，設置不在加載
$state.complete();
}
} else {
$state.complete();
}
});
},
},
components: { InfiniteLoading },
};
</script>
說明： $state: 該組件會傳遞一個特殊的事件參數(shù)$state給事件處理器來改變加載狀態(tài)，$state參數(shù)包括三個方法，它們是loaded方法，complete方法和reset方法。
- loaded方法用于在每次加載數(shù)據(jù)后停止播放動畫，然后該組件將準備好進行下一次觸發(fā)。
- complete方法用于完成完整的無限加載，則該組件將不再處理任何滾動操作。如果在loaded調用complete方法時永遠不會調用該方法，則此組件將顯示用戶的結果消息，如果不是，則將顯示不再有用戶消息，并且可以按slot設置其它內容
- reset方法是將組件返回到原來的狀態(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>
<!--或者點擊改變-->
<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為你請求數(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),
到此這篇關于Vue向下滾動加載更多數(shù)據(jù)-scroll-案例的文章就介紹到這了,更多相關Vue加載數(shù)據(jù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文詳細講解了Vue實現(xiàn)TabBar底部導航欄的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
Vue注冊模塊與登錄狀態(tài)的持久化實現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊模塊與登錄狀態(tài)的持久化實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
本文主要介紹了VSCode搭建vue項目的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
vue緩存的keepalive頁面刷新數(shù)據(jù)的方法
這篇文章主要介紹了vue緩存的keepalive頁面刷新數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要為大家介紹了Vue前端路由hash與history差異的深入了解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
Vue中el-menu-item實現(xiàn)路由跳轉的完整步驟
這篇文章主要給大家介紹了關于Vue中el-menu-item實現(xiàn)路由跳轉的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關于Vue中$refs的探索，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要為大家介紹了Vue之常用的內置指令，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vite?vue3?規(guī)范化與Git?Hooks詳解
這篇文章主要介紹了vite?vue3?規(guī)范化與Git?Hooks,本文重點討論?git?提交規(guī)范,結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了淺談實現(xiàn)vue2.0響應式的基本思路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02