脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue原生下拉刷新

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>

图片

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue从零实现一个消息通知组件的方法详解

    vue从零实现一个消息通知组件的方法详解

    这篇文章主要介绍了vue从零实现一个消息通知组件的方法,结合实例形式分析了vue实现消息通知组件的具体原理、实现步骤、与相关操作技巧,需要的朋友可以参考下
    2020-03-03
  • vuex直接修改state、commit和dispatch修改state的用法及区别说明

    vuex直接修改state、commit和dispatch修改state的用法及区别说明

    这篇文章主要介绍了vuex直接修改state、commit和dispatch修改state的用法及区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue 如何将二维数组转化为一维数组

    vue 如何将二维数组转化为一维数组

    这篇文章主要介绍了vue 如何将二维数组转化为一维数组，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue的keep-alive中使用EventBus的方法

    vue的keep-alive中使用EventBus的方法

    keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。这篇文章主要介绍了vue的keep-alive中使用EventBus的方法,需要的朋友可以参考下
    2019-04-04
  • 详解jquery和vue对比

    详解jquery和vue对比

    这篇文章主要介绍了jquery和vue对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue项目中定义全局变量的几种常用方法总结

    Vue项目中定义全局变量的几种常用方法总结

    在项目中经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量,这篇文章主要给大家介绍了关于Vue项目中定义全局变量的几种常用方法的相关资料,需要的朋友可以参考下
    2023-12-12
  • 关于vue3中setup函数的使用

    关于vue3中setup函数的使用

    这篇文章主要介绍了关于vue3中setup函数的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue3接口数据赋值对象,渲染报错问题及解决

    vue3接口数据赋值对象,渲染报错问题及解决

    这篇文章主要介绍了vue3接口数据赋值对象,渲染报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue使用konva实现一个简便的流程图

    Vue使用konva实现一个简便的流程图

    日常开发中我们可能碰到流程图的需求,实现流程图的库有很多,如果我们想要实现一个简便的流程图可以使用konva库来实现,下面我们就来看一下具体的实现过程,需要的朋友可以参考下
    2023-08-08
  • 解决vue安装less报错Failed to compile with 1 errors的问题

    解决vue安装less报错Failed to compile with 1 errors的问题

    这篇文章主要介绍了解决vue安装less报错Failed to compile with 1 errors的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论