87,907
社区成员
发帖
与我相关
我的任务
分享
<template>
<vue-waterfall-easy v-bind:imgsArr="imgsArr" v-on:scrollLoadImg="fetchImgsData"></vue-waterfall-easy>
</template>
<style lang="scss" scoped>
</style>
<script>
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
components: {
vueWaterfallEasy
},
data() {
return {
imgsArr: [], //用于存放所有已经加载的图片数组
fetchImgsArr: [] //用于存放每次滚动时下一批需要加载的图片数组
};
},
methods: {
initImgsArr(n, m) {
// 初始化图片数组的方法,把要加载的图片装入数组中
console.log("执行了initImgsArr方法");
var arr = [];
for (var i = n; i < m; i++) {
arr.push({
src: require(`../static/img/${i + 1}.jpg`), //存放图片的地址
info: "这是一张图片" //存放图片的描述
});
}
return arr;
},
fetchImgsData() {
//获取新的图片数据的方法,用于网页滚动满足条件时调用
console.log("执行了fetchImgsData方法");
this.imgsArr = this.imgsArr.concat(this.fetchImgsArr);
}
},
created() {
console.log("执行了created方法");
this.imgsArr = this.initImgsArr(0, 6); //初始化先加载6张图片
this.fetchImgsArr = this.initImgsArr(7, 13); //模拟下一批新的图片的数组数据
console.log(1, this.imgsArr, 2, this.fetchImgsArr);
}
};
</script>