vue 瀑布流插件albumwaterfall-easy

749 阅读1分钟

,直接用命令行在你的项目目录下执行: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 } }

详细API