实现上拉刷新功能(及小车运动的效果)仿优信二手车
<template>
<div class="car-box">
<div class="car"></div>
<div class="box" @touchstart="fnstart" ref="Element">
<div class="con-txt">上拉刷新</div>
</div>
</div>
</template>
<script>
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) {
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() {
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", () => {
console.log(1111);
this.$refs["Element"].style.transition = null;
});
}, 3000);
},
},
};
</script>
<style lang="less" scoped>
.box {
text-align: center;
height: 600px;
width: 100vw;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
@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;
}
}
.car {
text-align: center;
margin: auto;
width: 199px;
height: 134px;
background: url("../assets/car.png") no-repeat;
background-position: 0 0;
background-size: 100% auto;
animation: animation_car 1.5s steps(1) infinite;
}
</style>
注意:这里的小车是一帧一帧来写的运用css3动画