,直接用命令行在你的项目目录下执行:npm install vue-waterfall-easy --save
引入组件
import vueWaterfallEasy from '你的路径/组件名.vue'
注册组件
components: { vueWaterfallEasy }
data(){
return{
imgsArr:[]
}}
页面使用
<vue-waterfall-easy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData">
| props.index | 图片在数组中的索引,从0开始 | | props.value | 遍历参数imgsArr的元素值 |
组参数说明 props: { gap: { // 图片间隔 type: Number, default: 20 }, maxCols: { // 最大的列数 type: Number, default: 5 }, imgsArr: { // 请求返回的图片数据,格式:[{src:'1.jpg','link':'url1' info:'自定义图片信息'},{src:'2.jpg','link':'url2',info:'自定义图片信息'}...] type: Array, required: true }, imgWidth: { // 指定图片的统一宽度 type: Number, default: 240 }, timeOut: { // 预加载事件小于500毫秒就不显示加载动画,增加用户体验 type: Number, default: 500 } }