vue-waterfall-easy+axios无限下拉vue瀑布流

公司项目要进行改版，要把之前masonry.pkgd.js制作的瀑布流改版成vue的瀑布流，于是找到了这么一个vue组件名为

vue-waterfall-easy，然后试着利用这个组件制作了一个瀑布流的demo类似于下面这样

接下来就说一说是如何使用这个vue-waterfall-easy组件的

首先我们依然是要安装他，进入我们的项目文件，然后输入

npm install vue-waterfall-easy --save-dev

没什么疑问，等安装完成后，会提示我们组件的版本，然后打开项目目录下的package.json搜索 vue-waterfall-easy看一看又没有自动添加依赖，如果没有，就添加一下代码

    "vue-waterfall-easy": "^2.4.3",

这样就算安装完成了，然后呢，在vue页面中引入组件

import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
    components: { vueWaterfallEasy },

 这样就可以开始使用我们的waterfall了

这个组件的HTML代码像下面这样

 还有一些组件参数会附在文章末尾

其中比较重要的参数分别是

:imgsArr
@scrollReachBottom

 imgsArr是我们存放瀑布流将要使用的图片的容器，这个图片在瀑布流模块中默认处于顶部，并且这个容器是数组模式，而且对于内部的数据格式有要求，必须向下面这样

[{
    src:'',//图片地址
    link:''//图片可能用到的跳转地址
}]

所以在添加数据的时候要注意

而@scrollReachBottom则是我们下拉页面是调用的函数

然后来定义我们的需要用到的变量

  data: () => ({
      page: 1,//后台接受的页数参数
      arrImage:[]//存储我们所有已加载的图片链接的容器
    }),

 及在methods中定义方法

      postData(){
        this.axios({
          method:'post',
          url:url,
          params:{//注意this.axios必须使用params传递参数
            page:this.page
          },
        }).then((response) =>{
          var top=response.data
          var arr=[]
          for (var i in top){
            arr.push({src:top[i].Image})//数据形式，如果不需要跳转则只需要src
          }
          this.arrImage = this.arrImage.concat(arr)//需要用拼接数组的方法存储已加载的所有图片
          this.page++
        }).catch((error) =>
          console.log(error)//请求失败返回的数据
        )
      },

最后在页面加载时调用一下方法

 created () {
      this.postData()
    }

一个基本的图片瀑布流就算完成了~

谢谢观看

我是你们的狐狸

下面是组件参数表 

 

width
Number
容器宽度（px），默认是相对父元素宽度100%，由于响应式，此时其所有上级元素宽度必须都是相对浏览器窗口100%，具体看该表格下面实例。如果为定宽的话，必须设置width值，而不能只是其父元素设置定宽

height
Number|String
容器高度,值为Number类型时默认单位px，值为String类型时可指定单位当不传递height值时，默认是相对父元素高度100%，此时父元素必须具有高度

gap
Number
单位：px pc端图片之间的间距

mobileGap
Number
单位：px 移动端图片之间的间距

imgsArr
Array
必填用于渲染瀑布流的数据每个数组元素是个对象，应该要有src和href属性src属性代表图片的src属性href属性代表点击跳转的链接如果你的键值不是src和href，你可以使用srcKey和hrefKey这两个属性进行键值装换

srcKey
String
当你的图片地址键值不为src，可以使用该属性进行转换

hrefKey
String
当你的图片地址键值不为href，可以使用该属性进行转换

imgWidth
Number
单位：px图片的宽度

maxCols
Number
瀑布流显示最大的列数

linkRange
String
标识点击触发跳转链接范围，值有：'card' 整张卡牌范围跳转链接 'img' 卡片内图片范围  custom 自定义可以通过slot插槽自定义跳转链接元素

isRouterLink
Boolean
值为false时渲染a标签，值为true时渲染router-link组件

reachBottomDistance
Number
单位：px滚动触发scrollReachBottom事件时的距离容器底部的距离

loadingDotCount
Number
默认loading动画点的数量

loadingDotStyle
Object
默认loading动画内小圆点的样式对象，可以自定义其样式

loadingTimeOut
Number
单位：ms 预加载事件小于500毫秒就不显示加载动画，增加用户体验

cardAnimationClass
String
用于给图片设置出现时的动画的calssName，如要去掉默认动画可以这样设置cardAnimationClass=""

enablePullDownEvent
Boolean
开启下拉事件

以及组件事件

scrollReachBottom
滚动条滚动到底部时,用于请求新的图片数据

preloaded
每次图片预加载完成执行

click
当卡片被点击时触发，看下面的实例

imgError
图片加载错误事件，第一个参数可获取到当前加载错误图片的相关数据

pullDownMove
移动端生效，触摸下拉事件，第一个参数可获取Y轴移动距离差，常用于下拉刷新

pullDownEnd
移动端生效，触摸下拉事件手指抬起，常用于下拉刷新