vue.js and vue-waterfall-easy realize waterfall flow + drop-down refresh

Recent project requirements first need waterfall flow, then need drop-down refresh function. I thought it would be easy to achieve this effect through vue-waterfall-easy and then use drop-down refresh in other ui libraries. But this is not the case. After trying many methods and failing to achieve the results, I finally got the results.

First, I read the document again when I tried to merge the two components and failed, only to find that the component actually brought a drop-down refresh!!! (I'm really stupid)
Attached is the address of the Chinese document: https://github.com/lfyfly/vue-waterfall-easy/blob/master/README-CN.md

Component parameters

Event

After reading the document, I found that he only gave two encapsulated functions with parameters, but the effect still needs to be realized by himself. And there is a bug in the distance difference between the Y axis returned from the pullDownMove event he gave. Of course, it is also possible that the method I wrote was incorrect. (My friends can try this one first when they have time.) So I rewrote one myself:
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,			// Record the number of scroll event triggers
	pullStart: 0,			// Initial Y-axis position of first movement
	pullMove: 0,			// Y-axis position of current point after moving
	pullDistance: 0,		// Calculate the Y-axis moving distance
	ifUp: false,			// Do you need rebound animation?
	moveTop: -50 + "px",	// Pull-down refresh moving distance
	ifReload: "Drop-down refresh",	// Drop-down refresh
	contentMove: "translate3d(0px, '+ 0 +'px, 0px)",	// Content Moving Distance
	openPullDown: true,	 	// Open drop-down refresh
	imgsArr: [],         	//An array of all loaded images (that is, all the images that will be loaded on the current page)
    fetchImgsArr: []     	//An array of images to be loaded for each scroll
  }
},
methods: {
  // Start rolling
  pullDown(e){
	// Listen for scrolling of the component
	let scrollTop = document.getElementsByClassName('vue-waterfall-easy-scroll')[0].scrollTop;
	this.moveTime++;
	// Triggered when scrolling to the top
	if(scrollTop == 0){
	  if(this.moveTime == 1){
		 if(this.moveTime%2 == 1){
		 // Record the Y-axis position of the initial point
		 this.pullStart = e.touches[0].pageY;		
		 }
	  }
	  // Record the Y-axis position and the Y-axis distance of the moving point
	  this.pullMove = e.touches[0].pageY;						
	  this.pullDistance = this.pullMove - this.pullStart;		

	  // If the calculated distance is negative, the moving position is set to zero and the initial position is redefined.
	  if(this.pullDistance < 0){					
		this.moveTime = 0;
	  } else {
		// It can be understood as moving speed to prevent finger movement to the bottom of the screen, drop-down refresh to follow the bottom of the situation.
		let moveSpeed = this.pullDistance/2;
		this.ifUp = false;
		this.ifReload = "Drop-down refresh";
		this.contentMove = "translate3d(0px, " + moveSpeed + "px, 0px)";
		this.moveTop = (moveSpeed - 50) + "px";
		if(this.pullDistance >= 200){
		  this.ifReload = "Release refresh";
		  // console.log("ok");
		}
	  }
    }
  },
  // Click on screen
  pullDownStart(e){
	this.moveTime = 0;
  },
  // End pull-down (finger off)
  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 = "Loading";
	  // ... Call the interface to get the data, after success_
	  this.imgsArr = this.initImgsArr(0,6);
	  this.ifReload = "Load complete";
	  setTimeout(()=>{
		this.contentMove = "translate3d(0px, " + 0 + "px, 0px)";
		this.moveTop = -50 + "px";
		console.log("Completing refresh");
	  },1000);
	}
  },
  // Get pictures
  initImgsArr(n, m){
	var arr = [];
	for(var i = n; i < m; i++){
	  //src is the address of the loaded image and link is the link address of the hyperlink
	  //info is a customized image display information, please fill it in according to your own situation.
	  arr.push({ src: require(`../assets/img/img${i + 1}.png`), link: "", info: "Some picture descriptions"});
	 }
	 return arr;
  },
  //A method for obtaining new image data to be invoked when page scrolling meets the criteria
  fetchImgsData(){
	this.imgsArr = this.imgsArr.concat(this.fetchImgsArr);
  }
},
created(){
  //Initialize the image data to be loaded for the first time (that is, when the page is loaded)
  this.imgsArr = this.initImgsArr(0, 6);
  // Data that simulates the next batch of new pictures per request
　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>

Above is my code to realize this function. I haven't found any problems yet. If you find any problems after using, you can leave a message to inform me. Thank you. I hope this article can help you.
If you need to reproduce it, please indicate the address. https://blog.csdn.net/qq_39224266/article/details/83061136 Thank you.