Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.