vue 瀑布流插件 vue-waterfall-easy ； vue-waterfall； vue-waterfall2

想咯是咯

已于 2023-12-14 17:29:04 修改

阅读量2.8k

点赞数 2

文章标签： vue.js 前端 javascript

于 2023-07-28 15:51:47 首次发布

本文链接：https://blog.csdn.net/weixin_45536315/article/details/131980664

版权

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