vue.js 结合 vue-waterfall-easy 实现瀑布流 + 下拉刷新

vue.js 结合 vue-waterfall-easy 实现瀑布流 + 下拉刷新

最近的项目需求首先页面展示是需要瀑布流的，然后还要有下拉刷新功能，我本以为通过 vue-waterfall-easy 实现了瀑布流后再使用其他 ui 库中的下拉刷新就能轻而易举的实现该效果，但事实并非如此，在尝试了多种方法未果后，终于得出了结果，下面进入主题：

首先我在尝试两个组件合并失败的时候重新去阅读了文档，才发现这个组件居然自带下拉刷新！！！（我真的是太蠢了）
附上中文文档地址：https://github.com/lfyfly/vue-waterfall-easy/blob/master/README-CN.md

组件参数

参数	类型	默认值	描述
enablePullDownEvent	Boolean	false	开启下拉事件

事件

事件名	描述
pullDownMove	移动端生效，触摸下拉事件，第一个参数可获取Y轴移动距离差，常用于下拉刷新
pullDownEnd	移动端生效，触摸下拉事件手指抬起，常用于下拉刷新

在阅读了文档之后发现他只是给出了参数已经两个封装好的函数，但是效果还是要自己来实现…并且他给出的 pullDownMove 事件中返回的Y轴移动距离差是有 bug 存在的，当然也有可能是我写的方法有误（小伙伴们有时间可以先试试他提供的这个）。所以我自己重新写了一个：
html:

<div class="pullDown" :style="{
      top:moveTop}" :class="ifUp?'moveUpAnimate':''">
  <p>{
  {ifReload}}</p>
</div>
<vue-waterfall-easy 
  :imgsArr="imgsArr" 
  :enablePullDownEvent="openPullDown"
  :style="{
      transform: contentMove}"
  :class="ifUp?'moveUpAnimate':''"
  @scrollReachBottom="fetchImgsData" 
  @pullDownEnd="endMove"
  @touchmove.native="pullDown($event)"
  @touchstart.native="pullDownStart($event)"
  ref