After reading this article, I believe that everyone can do the same, and make a refreshed and loaded component of their own.
Before talking about this function, we must first understand how to trigger the scroll bar event.
It must be noted that all scrolling events must meet this condition, and the same is true for horizontal scroll bars.
As long as the width of the child element is greater than the width of the parent element. (The next article will talk about how to implement a horizontal scroll bar)
Get to the point! ! !
Let's first take a look at how to analyze this pull-down refresh.
Three events on the mobile side to be used: touchstart (finger press), touchmove (finger move), touchend (finger leave)
Pull-down refresh is a process of (touchstart => touchmove (moving down) => touchend)
General idea :
The drop down is mainly related to the finger touching the y-axis point
1. Record the coordinate point where the finger presses the y-axis
2. Record the distance moved when the finger moves (Note: To judge whether the finger moves up or down, moving up is scrolling)
3. Start the pull-down refresh event
Look at the code:
In vue, you need to register events in methods and bind them to the parent element. Everyone here should be building projects with vue-cli!
If not, I will go back and give you a link, which has a project structure that has been built. Contains the source code of this plug-in, the demo is in it 1
<template>
<div class="parent">
<div class="child"></div>
</div>
</template>
<script>
export default {
data(){
return {
top: 0,
startY: 0 , // Save the position of the y-axis point
touching: false, // The switch that represents whether it is currently in the pull-down refresh behavior, that is, when it belongs to the scrolling behavior, it is necessary to exit the event mechanism
}
},
methods: {
touchStart(e) {
// e represents the event object, e.targetTouches[0].pageY can get the y-axis point pressed by the finger this.startY
= e.targetTouches[0].pageY
// Enable the pull-down refresh state
this.touching = true
},
touchMove(e) {
//This touchMove will happen as long as the page is moving, so touching will work
// If touching is false, it means that the moving page is not the pull-down refresh we want, it may be The user just pulled the page at will, or other
if(!this.touching) return
// Get the moving distance
let diff = e.targetToc=uches[0].pageY - this.startY
//Determine whether to pull up or down
if(diff >0) {
e.preventDefault()
} else {
return
}
//This.top should be bound to the element's transform: translateY(+top+ 'px'), otherwise it cannot be pulled
// Therefore, we also need to do some processing on the offset height here. It is too fast to set diff + (this.state === 2 ? 40 : 0) directly, because the pull rate is too large.
// Let diff*0.25 be almost the same
this.top = Math.floor(diff*0.25) + (this.state === 2 ? 40 : 0)
if(this.top >= 40) { this.state
= 1 //represents pulling
} else {
this.state = 0 //represents initial transition
}
},
touchEnd(e) {
this.touching = false
if(this.state === 2) {
this.top = 40
return
}
// Judging the height when lifting, if it is greater than 40, turn on the refresh
if(this.top >= 40) {
this.refresh()
} else { this.state =
0
this.top = 0
}
},
refresh() { this.state
= 2
this.top = 40
const self = this
// here you can call the parent Component method to request refresh interface
this.$emit('getRefresh', function(self){
//Pass a callback, restore
self.state = 0
self.top = 0
})
}
}
}
</script>
It's over here. Of course, it can't be used directly now. It must be used in combination with your actual business logic.
I put the demo on github:
https://github.com/13725102796/css3-demo/blob/master/src/plugins/scroll/scroll.vue
If you don't understand it, I suggest you pull down the entire project and run it. There are plug-ins for inspection, pop-up windows, etc., which are all used in the project and extracted.
Method: git clone https://github.com/13725102796/css3-demo.git
At the same time, you are also welcome to raise issues, or you can extend some other plugins.
Finally, don't forget to give a star! Encourage each other with you and eat bricks together!
The next article will talk about how to do this scroll loading! ! !