1.0.0 • Published 7 years ago
vue-waterfall-project v1.0.0
vue-waterfall-easy介绍
- 是一个vue组件,包含瀑布流布局和无限滚动加载
- 相比其他实现方式,无需在返回的数据中指定图片的宽度和高度
- 正是因为第一条,所以采用的是图片预加载之后,再排版
- 响应式,兼容移动端
- 使用及其简单
DEMO
GITHUB
vue-waterfall-easy使用
npm安装
npm install vue-waterfall-easy --save-dev
局部引用
import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
name: 'app',
components: {
vueWaterfallEasy
}
}
组件参数
props: {
gap: { // 图片间隔
type: Number,
default: 20
},
imgsArr: { // 请求返回的图片数据,格式:[{src:'1.jpg',info:'自定义图片信息'},{src:'2.jpg',info:'自定义图片信息'}...]
type: Array,
required: true
},
imgWidth: { // 指定图片的统一宽度
type: Number,
default: 240
},
timeOut: { // 预加载事件小于500毫秒就不显示加载动画,增加用户体验
type: Number,
default: 500
}
}
事件
事件名 | 描述 |
---|---|
scrollLoadImg | 滚动条滚动到底部时,用于请求新的图片数据 |
preloaded | 每次图片预加载完成执行 |
关于数据请求的约定
新请求返回的数据与原来的数据进行合并 详情见仓库 App.vue文件
this.imgsArr = this.imgsArr.concat(this.fetchImgsArr)
1.0.0
7 years ago