<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>
求各位大佬看一看,為什么圖片沒有正常顯示啊?
弄了快一整天了...
uj5u.com熱心網友回復：
把vue-waterfall-easy的position改成fixed后能看見圖片了
uj5u.com熱心網友回復：
原始碼里面改么？那要改好多地方哎uj5u.com熱心網友回復：
抱歉啊，過去很久了，我也不太清楚了。。。我沒改原始碼,我記得我是直接在<style></style>里改的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/112676.html
標籤：JavaScript
上一篇：獲取vue的data資料的值
下一篇：小白疑問bs 一定有中間件嗎？