vue实现原生下拉刷新
更新时间：2022年03月08日 10:02:30 作者：至_臻
这篇文章主要为大家详细介绍了vue实现原生下拉刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现原生下拉刷新的具体代码，供大家参考，具体内容如下
这是动画样式
文字样式
html代码
<template> <div class="car-box"> <div class="car">下拉刷新</div> <div class="box" @touchstart="fnstart" ref="Element"> <div class="con-txt">上拉刷新</div> </div> </div> </template>
js代码
<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) {
ev.target.parentNode.children[0].innerHTML = "下拉刷新";
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.parentNode.children[0].innerHTML = "正在刷新...";
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);
},
},
};
</script>css代码 我这边用的是scss
<style lang="scss" scoped>
.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;
}
</style>如果下拉刷新用动画就用这个css样式
图片的话我用的是28帧的 根据100除以28 也就是3.5 ，所以每3.5%换一个图，就能形成一个逐帧动画，每一个页面的宽高都不一样所以要计算 ，我的页面的大小是1080的这个也时我设置好的宽高。
这是代码
<style lang="scss" scoped>
.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;
}
}
</style>图片
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3触发父组件两种写法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-08-08
这篇文章主要为大家介绍了vitejs预构建理解及流程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
今天用vue来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。接下来本文通过实例代码给大家介绍100行代码实现一个vue分页组功能，感兴趣的朋友跟随小编一起看看吧2018-11-11
这篇文章主要介绍了解决vue无法设置滚动位置的问题 ,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了vue中的keep-alive内置组件缓存，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了vue使用一些外部插件及样式的配置代码,本文分步骤实例图文相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要为大家详细介绍了vue实现图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了Vue中的混入的使用(vue mixins)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家介绍了vue3实现数字滚动特效实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Vue的配置项'vue.config.js'是用来配置Vue项目的构建配置的,它是一个可选的配置文件,放置在项目的根目录下,这篇文章主要给大家介绍了关于vue配置vue.config.js的相关资料,需要的朋友可以参考下2024-01-01
最新评论