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="downRefresh"
>		
</vue-waterfall-easy>

js:

data(){
  return {
	moveTime: 0,			// 记录滚动事件触发次数
	pullStart: 0,			// 首次移动的初始Y轴位置
	pullMove: 0,			// 移动后当前点Y轴位置
	pullDistance: 0,		// 计算得到Y轴移动距离
	ifUp: false,			// 是否需要回弹动画
	moveTop: -50 + "px",	// 下拉刷新移动距离
	ifReload: "下拉刷新",	// 下拉刷新字样
	contentMove: "translate3d(0px, '+ 0 +'px, 0px)",	// 内容移动距离
	openPullDown: true,	 	// 开启下拉刷新
	imgsArr: [],         	//存放所有已加载图片的数组（即当前页面会加载的所有图片）
    fetchImgsArr: []     	//存放每次滚动时下一批要加载的图片的数组
  }
},
methods: {
  // 开始滚动
  pullDown(e){
	// 监听该组件的滚动
	let scrollTop = document.getElementsByClassName('vue-waterfall-easy-scroll')[0].scrollTop;
	this.moveTime++;
	// 当滚动到顶部的时候触发
	if(scrollTop == 0){
	  if(this.moveTime == 1){
		 if(this.moveTime%2 == 1){
		 // 记录下初始点的Y轴位置
		 this.pullStart = e.touches[0].pageY;		
		 }
	  }
	  // 记录下移动后点的Y轴位置 和 Y轴移动距离
	  this.pullMove = e.touches[0].pageY;						
	  this.pullDistance = this.pullMove - this.pullStart;		

	  // 如果计算出距离为负数则规定移动位置为0 重新确定初始点位置
	  if(this.pullDistance < 0){					
		this.moveTime = 0;
	  } else {
		// 可以理解为移动速度，防止手指移动到屏幕底端,下拉刷新跟到底端的情况发生
		let moveSpeed = this.pullDistance/2;
		this.ifUp = false;
		this.ifReload = "下拉刷新";
		this.contentMove = "translate3d(0px, " + moveSpeed + "px, 0px)";
		this.moveTop = (moveSpeed - 50) + "px";
		if(this.pullDistance >= 200){
		  this.ifReload = "释放刷新";
		  // console.log("ok");
		}
	  }
    }
  },
  // 点击屏幕
  pullDownStart(e){
	this.moveTime = 0;
  },
  // 结束下拉（手指离开）
  endMove(){
	this.ifUp = true;
	if(this.pullDistance < 200){
	  this.contentMove = "translate3d(0px, " + 0 + "px, 0px)";
	  this.moveTop = -50 + "px";
	} else {
	  this.contentMove = "translate3d(0px, " + 50 + "px, 0px)";
	  this.moveTop = 0 + "px";
	  this.ifReload = "加载中";
	  // ...调用接口获取数据，成功后 ↓
	  this.imgsArr = this.initImgsArr(0,6);
	  this.ifReload = "加载完成";
	  setTimeout(()=>{
		this.contentMove = "translate3d(0px, " + 0 + "px, 0px)";
		this.moveTop = -50 + "px";
		console.log("完成刷新");
	  },1000);
	}
  },
  // 获取图片
  initImgsArr(n, m){
	var arr = [];
	for(var i = n; i < m; i++){
	  //src为加载的图片的地址、link为超链接的链接地址
	  //info为自定义的图片展示信息，请根据自己的情况自行填写
	  arr.push({ src: require(`../assets/img/img${i + 1}.png`), link: "", info: "一些图片描述文字"});
	 }
	 return arr;
  },
  //获取新的图片数据的方法，用于页面滚动满足条件时调用
  fetchImgsData(){
	this.imgsArr = this.imgsArr.concat(this.fetchImgsArr);
  }
},
created(){
  //初始化第一次（即页面加载完毕时）要加载的图片数据
  this.imgsArr = this.initImgsArr(0, 6);
  // 模拟每次请求的下一批新的图片的数据
　this.fetchImgsArr = this.initImgsArr(7, 13);
},

css:

<style lang="scss">
  #test{
	height: 100vh;

    .pullDown{
	  position: absolute;
	  left: 0;
	  width: 100%;
	  text-align: center;

	  p{
	    font-size: 14px;
	    padding: 20px 0;	
        width: 100%;
	  }
    }

    .moveUpAnimate{
	  transition: 200ms ease all;
	  -webkit-transition: 200ms ease all;
    }
  }
</style>

以上是我在实现这一功能的实现代码，现在还没发现什么问题，有小伙伴在使用后如发现问题可留言告知，感谢，希望本文能给你们带来帮助。
如需转载请注明地址，https://blog.csdn.net/qq_39224266/article/details/83061136 谢谢。