vue-waterfall-easy
1. 使用
适用于图片布局
1.1 npm安装
npm install vue-waterfall-easy --save-dev
1.2 es6语法引用
import vueWaterfallEasy from 'vue-waterfall-easy'
..........
export default {
name: 'app',
components: {
vueWaterfallEasy
}
}
2. 基本示例
<!-- html -->
<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>
如果imgArr是替换更新,getData新请求返回的数据覆盖原来的数据。
如果imgArr是增量更新,getData新请求返回的数据与原来的数据进行合并,此时不建议使用替换更新,会浪费性能。下面这个例子就是增量更新。
// js
import vueWaterfallEasy from 'vue-waterfall-easy'
import axios from 'axios'
export default {
name: 'app',
data() {
return {
imgsArr: [],
group: 0, // request param
}
},
components: {
vueWaterfallEasy
},
methods: {
getData() {
axios.get('./static/mock/data.json?group=' + this.group) // 真实环境中,后端会根据参数group返回新的图片数组,这里我用一个惊呆json文件模拟
.then(res => {
this.imgsArr = this.imgsArr.concat(res.data)
this.group++
})
},
},
created() {
this.getData()
}
}
3. 组件参数
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
width | Number | - | 容器宽度(px),默认是相对父元素宽度100%,由于响应式,此时其所有上级元素宽度必须都是相对浏览器窗口100%,具体看该表格下面实例。如果为定宽的话,必须设置width值,而不能只是其父元素设置定宽 |
height | Number String | - | 容器高度,值为Number类型时默认单位px,值为String类型时可指定单位当不传递height值时,默认是相对父元素高度100%,此时父元素必须具有高度 |
gap | Number | 20 | 单位:px pc端图片之间的间距 |
mobileGap | Number | 8 | 单位:px 移动端图片之间的间距 |
imgsArr | Array | [ ] | 必填,用于渲染瀑布流的数据每个数组元素是个对象,应该要有src和href属性src属性代表图片的src属性href属性代表点击跳转的链接如果你的键值不是src和href,你可以使用srcKey和hrefKey这两个属性进行键值装换 |
srcKey | String | ‘src’ | 当你的图片地址键值不为src,可以使用该属性进行转换 |
hrefKey | String | ‘href’ | 当你的图片地址键值不为href,可以使用该属性进行转换 |
imgWidth | Number | 240 | 单位:px 图片的宽度 |
maxCols | Number | 5 | 瀑布流显示最大的列数 |
linkRange | String | ‘card’ | 标识点击触发跳转链接范围,值有: ‘card’ 整张卡牌范围跳转链接’ img’ 卡片内图片范围 custom 自定义可以通过slot插槽自定义跳转链接元素 |
isRouterLink | Boolean | false | 值为false时渲染a标签,值为true时渲染router-link组件 |
reachBottomDistance | Number | 0 | 单位:px 滚动触发scrollReachBottom事件时的距离容器底部的距离 |
loadingDotCount | Number | 3 | 默认loading动画点的数量 |
loadingDotStyle | Object | null | 默认loading动画内小圆点的样式对象,可以自定义其样式 |
loadingTimeOut | Number | 500 | 单位:ms 预加载事件小于500毫秒就不显示加载动画,增加用户体验 |
cardAnimationClass | String | ‘default-card-animation’ | 用于给图片设置出现时的动画的calssName,如要去掉默认动画可以这样设置cardAnimationClass=“” |
enablePullDownEvent | Boolean | false | 开启下拉事件 |
waterfall组件祖先元素css样式
html,
body,
#app {
height: 100%; // 父元素必须要有高度
width: 100%; // 如果已经是block元素,则可以忽略
}
4. 事件
事件名 | 描述 |
---|---|
scrollReachBottom | 滚动条滚动到底部时,用于请求新的图片数据 |
preloaded | 每次图片预加载完成执行 |
click | 当卡片被点击时触发,看下面的实例 |
imgError | 图片加载错误事件,第一个参数可获取到当前加载错误图片的相关数据 |
pullDownMove | 移动端生效,触摸下拉事件,第一个参数可获取Y轴移动距离差,常用于下拉刷新 |
pullDownEnd | 移动端生效,触摸下拉事件手指抬起,常用于下拉刷新 |
click事件使用实例
<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData" @click="clickFn"></vue-waterfall-easy>
clickFn(event, { index, value }) {
// 阻止a标签跳转
event.preventDefault()
// 只有当点击到图片时才进行操作
if (event.target.tagName.toLowerCase() == 'img') {
console.log('img clicked',index, value)
}
}
5. 组件方法
5.1 waterfallOver
当滚动加载数据结束时,手动调用,将会取消滚动加载
this.$refs.waterfall.waterfallOver()
6. slot插槽
6.1 默认slot
进行自定义图片的描述信息
加粗样式
参数 | 描述 |
---|---|
props.index | 图片在数组中的索引,从0开始 |
props.value | 遍历参数imgsArr的元素值 |
<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
<div class="img-info" slot-scope="props">
<p class="some-info">第{{props.index+1}}张图片</p>
<p class="some-info">{{props.value.info}}</p>
</div>
</vue-waterfall-easy>
6.2 slot=“loading”
自定义加载动画
<div slot="loading" slot-scope="{isFirstLoad}">
<div slot="loading" v-if="isFirstLoad">first-loading...</div>
<div v-else="v-else">loading...</div>
</div>
6.3 slot=“waterfall-head”
容器头部内容插槽
<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
<div slot="waterfall-head">waterfall-head</div>
</vue-waterfall-easy>
6.4 slot=“waterfall-over”
调用waterfallOver方法后才会显示,用于瀑布流结束提醒,默认值是被你看光了
<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
<div slot="waterfall-over">waterfall-over</div>
</vue-waterfall-easy>
7. 兼容移动端
别忘记在index.html head中添加一下代码
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
vue-waterfall
适用于知道元素宽高的情况下 可用于元素(各种元素)的布局
1.安装
npm install --save vue-waterfall
1.1 es6引用
// js
import Waterfall from 'vue-waterfall/lib/waterfall'
import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
export default {
...
components: {
Waterfall,
WaterfallSlot
},
...
}
<!-- html -->
<waterfall :line-gap="200" :watch="items">
<!-- each component is wrapped by a waterfall slot -->
<waterfall-slot
v-for="(item, index) in items"
:width="item.width"
:height="item.height"
:order="index"
:key="item.id"
>
<!--
your component
-->
</waterfall-slot>
</waterfall>
2. Props
waterfall
Name | Default | Description |
---|---|---|
line | v | v or h . Line direction. |
line-gap | - | Required. The standard space (px) between lines. |
min-line-gap | = line-gap | The minimal space between lines. |
max-line-gap | = line-gap | The maximal space between lines. |
single-max-width | = max-line-gap | The maximal width of slot which is single in horizontal direction. |
fixed-height | false | Fix slot height when line = v . |
grow | - | Number Array. Slot flex grow factors in horizontal direction when line = v . Ignore *-gap . |
align | left | left or right or center . Alignment. |
auto-resize | true | Reflow when window size changes. |
interval | 200 | The minimal time interval (ms) between reflow actions. |
watch | {} | Watch something, reflow when it changes. |
waterfall-slot
Name | Default | Description |
---|---|---|
width | - | Required. The width of slot. |
height | - | Required. The height of slot. |
order | 0 | The order of slot, often be set to index in v-for . |
key | ‘’ | The unique identification of slot, required for transition. |
move-class | - | Class for transition. see vue-animated-list . |
vue-waterfall2
vue-waterfall2@2.x 适用于 vue3, 如果你的应用是 vue2,请使用 vue-waterfall2@1.10.x, 1.10.x document
1.不需知道元素宽高,可宽高自适应
2.支持无图/视频/banner等,内容自定义程度高
3.支持懒加载(lazy-src)
4.提供Event:loadmore (pc/android端滑动到底部触发,ios端需要上拉触发)
5.使用极为简便, 适用于PC/ios/android
1.安装
npm i vue-waterfall2@latest --save
2.属性
Name | Default | Type | Desc |
---|---|---|---|
height | - | String | 容器高度(height为空监听的是window的滚动事件,不为空则监听容器滚动,loadmore无法触发时,可尝试设置容器高度) |
col | 2 | Number | 列数 |
width | - | Number | 宽度 |
gutterWidth | 10 | Number | 间隔的宽度 |
data | [] | Array | 数据 |
isTransition | true | Boolean | 加载图片是否使用过渡动画 |
lazyDistance | 300 | Number | 触发图片懒加载的距离 |
loadDistance | 300 | Number | 触发上拉加载更多的距离 |
3.懒加载
对于需要使用懒加载的图片,需要使用lazy-src属性
<waterfall :col='col' :data="data" >
<img v-if="item.img" :lazy-src="item.img" alt="加载错误" />
</waterfall>
4.Events
Name | Data | Desc |
---|---|---|
loadmore | - | 滚动到底部触发 |
scroll | info | 获取滚动时的event对象 |
finish | - | 完成元素渲染 |
5.$waterfall API
this.$waterfall.forceUpdate() //forceUpdate
6.Usage
注意:
使用rem布局时,需先计算出自适应后的宽度再传值
使用了waterfall的父组件,如果样式存在问题,可去掉css scoped尝试一下
main.js
//
import { createApp } from "vue";
import waterfall from 'vue-waterfall2'
const app = createApp(App)
app.use(waterfall)
app.vue
<!-- app.vue-->
<template>
<div class="container-water-fall">
<div><button @click="loadmore">loadmore</button> <button @click="mix">mix</button> <button @click="switchCol('5')">5列</button> <button @click="switchCol('8')">8列</button> <button @click="switchCol('10')">10列</button> </div>
<waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth" :data="data" @loadmore="loadmore" @scroll="scroll" >
<div class="cell-item" v-for="(item,index) in data">
<img v-if="item.img" :src="item.img" alt="加载错误" />
<div class="item-body">
<div class="item-desc">{{item.title}}</div>
<div class="item-footer">
<div class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>
<div class="name">{{item.user}}</div>
<div class="like" :class="item.liked?'active':''" >
<i ></i>
<div class="like-total">{{item.liked}}</div>
</div>
</div>
</div>
</div>
</waterfall>
</div>
</template>
<!-- 注意:
1. 使用`rem`布局时,需先计算出自适应后的宽度再传值
2. 使用了`waterfall`的父组件,如果样式存在问题,可去掉css `scoped`尝试一下 -->
import Vue from 'vue'
export default{
data(){
return{
data:[],
col:5,
}
},
computed:{
itemWidth(){
return (138*0.5*(document.documentElement.clientWidth/375)) #rem布局 计算宽度
},
gutterWidth(){
return (9*0.5*(document.documentElement.clientWidth/375)) #rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
}
},
methods:{
scroll(scrollData){
console.log(scrollData)
},
switchCol(col){
this.col = col
console.log(this.col)
},
loadmore(index){
this.data = this.data.concat(this.data)
}
}
}