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如何實現原生下拉刷新”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！