一：基礎(chǔ)使用
- 1.安裝 npm i vue-infinite-scroll --save
- 2.引入 var infiniteScroll = require('vue-infinite-scroll')
Vue.use(infiniteScroll) - 3.小例
選項 描述
infinite-scroll-disabled 如果該屬性的值為true鲤嫡，則將禁用無限滾動
infinite-scroll-distance 數(shù)字(默認(rèn)值=0)——在執(zhí)行v-infinite-scroll方法之前碎连，元素底部和viewport底部之間的最小距離。
infinite-scroll-immediate-check 布爾值(默認(rèn)值= true)表示該指令應(yīng)該在綁定后立即檢查卫枝。如果可能酣倾，內(nèi)容不夠高舵揭，不足以填滿可滾動的容器。
infinite-scroll-listen-for-event 當(dāng)事件在Vue實例中發(fā)出時躁锡，無限滾動將再次檢查午绳。
infinite-scroll-throttle-delay 下次檢查和這次檢查之間的間隔(默認(rèn)值= 200)
vue 組件里面：
data(){
return{
busy: true,
page:1,
pageSize:8,
}
},methods:{
getGoodsList(flag){
let sort = this.sortFlag ? 1 : -1;
let param = {
sort:sort,
priceLevel:this.priceChecked,
page:this.page,
pageSize:this.pageSize
}
axios.get('/goods/list',{params:param}).then(res=>{
if(flag){
// 多次加載數(shù)據(jù)
this.goods = this.goods.concat(res.data.result);
if(res.data.result.length == 0){
this.busy = true;
}else{
this.busy = false;
}
}else{
// 第一次加載數(shù)據(jù)
this.goods = res.data.result;
// 當(dāng)?shù)谝淮渭虞d數(shù)據(jù)完之后，把這個滾動到底部的函數(shù)觸發(fā)打開
this.busy = false;
}
})
},
loadMore: function() {
this.busy = true;
// 多次加載數(shù)據(jù)
setTimeout(() => {
this.page ++;
this.getGoodsList(true);
}, 1000);
}
}
參考的地址：https://segmentfault.com/a/1190000011693433
二：使用
在最大的標(biāo)簽上寫三個條件：注意標(biāo)簽的高度映之，最好設(shè)置一個最小高度min-height
data() {
return {
matchlist:[],
logo: 'this.src="' + require('../assets/state1@2x.png') + '"',
busy2:true,
start:1
}
},
created(){
this.getList2()
},
methods:{
getList2:function (flag2){
this.axios.get('urlxxxx',{params:{start:this.start}}).then(res=>{
console.log(res.data);
// 按時間倒序排列
res.data.sort(function(a,b){
return b.time-a.time;
});
if(flag2){
console.log(this.start);
this.matchlist = this.matchlist.concat(res.data);
// this.matchlist = res.data;
console.log(this.matchlist);
if(this.matchlist.length == 0){
this.busy2=true;
console.log('lenght');
}else{
this.busy2 = false;
}
}else{
this.matchlist = this.matchlist.concat(res.data);
// this.matchlist = res.data;
this.busy2 = false;
}
},err=>{
console.log(err);
});
},
loadMore2: function() {
console.log('load');
this.busy2 = true;
// 多次加載數(shù)據(jù)
this.start ++;
this.getList2(true);
}
}
