欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)原生下拉刷新

 更新時(shí)間：2022年03月08日 10:02:30   作者：至_臻  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)原生下拉刷新的具體代碼，供大家參考，具體內(nèi)容如下

這是動(dòng)畫樣式 

 文字樣式

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>

如果下拉刷新用動(dòng)畫就用這個(gè)css樣式 

圖片的話我用的是28幀的 根據(jù)100除以28  也就是3.5 ，所以每3.5%換一個(gè)圖，就能形成一個(gè)逐幀動(dòng)畫，每一個(gè)頁面的寬高都不一樣所以要計(jì)算 ，我的頁面的大小是1080的這個(gè)也時(shí)我設(shè)置好的寬高。

這是代碼

<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>

圖片

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3觸發(fā)父組件兩種寫法

    vue3觸發(fā)父組件兩種寫法

    這篇文章主要介紹了vue3觸發(fā)父組件兩種寫法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-08-08
  • vitejs預(yù)構(gòu)建理解及流程解析

    vitejs預(yù)構(gòu)建理解及流程解析

    這篇文章主要為大家介紹了vitejs預(yù)構(gòu)建理解及流程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-07-07
  • 100行代碼實(shí)現(xiàn)一個(gè)vue分頁組功能

    100行代碼實(shí)現(xiàn)一個(gè)vue分頁組功能

    今天用vue來實(shí)現(xiàn)一個(gè)分頁組件，總體來說，vue實(shí)現(xiàn)比較簡單，樣式部分模仿了elementUI。接下來本文通過實(shí)例代碼給大家介紹100行代碼實(shí)現(xiàn)一個(gè)vue分頁組功能，感興趣的朋友跟隨小編一起看看吧
    2018-11-11
  • 解決vue無法設(shè)置滾動(dòng)位置的問題

    解決vue無法設(shè)置滾動(dòng)位置的問題

    這篇文章主要介紹了解決vue無法設(shè)置滾動(dòng)位置的問題 ,需要的朋友可以參考下
    2018-10-10
  • vue中keep-alive內(nèi)置組件緩存的實(shí)例代碼

    vue中keep-alive內(nèi)置組件緩存的實(shí)例代碼

    這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-04-04
  • vue使用一些外部插件及樣式的配置代碼

    vue使用一些外部插件及樣式的配置代碼

    這篇文章主要介紹了vue使用一些外部插件及樣式的配置代碼,本文分步驟實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-11-11
  • vue實(shí)現(xiàn)圖片上傳功能

    vue實(shí)現(xiàn)圖片上傳功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-05-05
  • Vue中的混入的使用(vue mixins)

    Vue中的混入的使用(vue mixins)

    這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解

    vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解

    這篇文章主要為大家介紹了vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-09-09
  • vue配置vue.config.js超詳細(xì)教程

    vue配置vue.config.js超詳細(xì)教程

    Vue的配置項(xiàng)'vue.config.js'是用來配置Vue項(xiàng)目的構(gòu)建配置的,它是一個(gè)可選的配置文件,放置在項(xiàng)目的根目錄下,這篇文章主要給大家介紹了關(guān)于vue配置vue.config.js的相關(guān)資料,需要的朋友可以參考下
    2024-01-01

最新評(píng)論