Vue-waterfall-easy中图片无法正常显示

天涯望月羊 2019-06-08 06:10:46

<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>


求各位大佬看一看,为什么图片没有正常显示啊?
弄了快一整天了...
...全文
382 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
天涯望月羊 2019-12-28
  • 打赏
  • 举报
回复
引用 2 楼 紫一 的回复:
源码里面改么?那要改好多地方哎
抱歉啊,过去很久了,我也不太清楚了。。。我没改源码,我记得我是直接在<style></style>里改的
紫一 2019-07-28
  • 打赏
  • 举报
回复
源码里面改么?那要改好多地方哎
天涯望月羊 2019-06-08
  • 打赏
  • 举报
回复
把vue-waterfall-easy的position改成fixed后能看见图片了

87,907

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧