vue-infinite-scroll
安裝
npm install vue-infinite-scroll --save
盡管官方也推薦了幾種載入方式，但“最vue”的方式肯定是在main.js中加入
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"表示由變數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, 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>
資料
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);
}
},
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的狀態.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="javascript:;" @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:;" @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 '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),轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/293226.html
標籤：其他
下一篇：詐騙應用重卷AppStore