How to realize the original drop-down refresh by vue
This article is about how vue implements the original drop-down refresh. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Text styl
Html code
Drop-down refresh
Pull-up refresh
Js code
Export default {
Methods: {
Fnstart (ev) {
This.$refs ["Element"] .style.top = 0
This.scroolTop =
Ev.changedTouches [0] .pageY-this.$refs ["Element"] .offsetTop
_ document.ontouchmove = this.fnmove
_ document.ontouchend = this.fnEnd
Ev.preventDefault & & ev.preventDefault ()
}
Fnmove (ev) {
EV.target [XSS _ clean] .children [0] [xss_clean] = "drop-down refresh"
This.T = ev.changedTouches [0] .pageY-this.scroolTop
If (this.scale > 0.12) {
This.scale = 1-this.T / 200
} else {
This.scale = 0.12
}
This.$refs ["Element"] .style.top = this.T * this.scale + "px"
}
FnEnd (ev) {
EV.target [XSS _ clean] .children [0] [xss_clean] = "refreshing."
_ document.ontouchmove = null
_ document.ontouchend = null
SetTimeout () = > {
This.$refs ["Element"] .style.top = 0
This.$refs ["Element"] .style.transition = ".3s ease all"
This.$refs ["Element"] .addEventListener ("transitionend", () = > {
This.$refs ["Element"] .style.transition = null
});
}, 3000)
}
}
}
I use scss for css code.
.box {
Text-align: center
Height: 600px
Width: 100vw
Background-color: orange
Position: absolute
Left: 0
Top: 0
}
.car {
Text-align: center
Margin: auto
Width: 199px
Height: 60px
Line-height: 60px
Background-position: 0 0
Background-size: 100% auto
Animation: animation_car 1.5s steps (1) infinite
}
If the drop-down refresh uses animation, use this css style.
For pictures, I use 28 frames according to 100 divided by 28, that is, 3.5, so every 3.5% of a picture, you can form a frame-by-frame animation, and the width and height of each page is different, so to calculate, the size of my page is 1080 of the width and height I set.
This is the code.
.box {
Text-align: center
Height: 600px
Width: 100vw
Background-color: orange
Position: absolute
Left: 0
Top: 0
}
.car {
Text-align: center
Margin: auto
Width: 199px
Height: 134px
/ / margin-bottom: 200px
Background: url (".. / assets/img/car.png") no-repeat
Background-position: 0 0
Background-size: 100% auto
Animation: animation_car 1.5s steps (1) infinite
}
@ keyframes animation_car {
0% {
Background-position: 0px
}
3.5% {
Background-position: 0px-134px
}
7% {
Background-position: 0px-268px
}
10.5% {
Background-position: 0px-402px
}
14% {
Background-position: 0px-536px
}
17.5% {
Background-position: 0px-670px
}
21% {
Background-position: 0px-804px
}
24.5% {
Background-position: 0px-938px
}
28% {
Background-position: 0px-1072px
}
31.5% {
Background-position: 0px-1206px
}
35% {
Background-position: 0px-1340px
}
38.5% {
Background-position: 0px-1474px
}
42% {
Background-position: 0px-1608px
}
45.5% {
Background-position: 0px-1742px
}
49% {
Background-position: 0px-1876px
}
52.5% {
Background-position: 0px-2010px
}
56% {
Background-position: 0px-2144px
}
59.5% {
Background-position: 0px-2278px
}
63% {
Background-position: 0px-2412px
}
66.5% {
Background-position: 0px-2546px
}
70% {
Background-position: 0px-2680px
}
73.5% {
Background-position: 0px-2814px
}
77% {
Background-position: 0px-2948px
}
80.5% {
Background-position: 0px-3082px
}
84% {
Background-position: 0px-3216px
}
87.5% {
Background-position: 0px-3350px
}
91% {
Background-position: 0px-3350px
}
94.5% {
Background-position: 0px-3484px
}
98% {
Background-position: 0px-3618px
}
}
Thank you for reading! This is the end of the article on "how to realize the original drop and refresh of vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!
