vue实现数字翻页动画

本文实例为大家分享了vue实现数字翻页动画的具体代码,供大家参考,具体内容如下

一、看效果

二、实现步骤

1、新建翻页组件scrollNumber.vue

<template>
    <div class="count-flop" :key="compKey">
        <div :class="item != '.' && item != ',' ?'count-flop-box':'count-flop-point'" v-for="(item, index) in value" :key="index">
            <div v-if="item == ','" class="count-flop-content">,</div>
            <div v-else-if="item == '.'" class="count-flop-content">.</div>
            <div v-else class="count-flop-content" :class="['rolling_' + item]">
                <div v-for="(item2,index2) in numberList" :key="index2" class="count-flop-num">{{item2}}</div>
            </div>
        </div>
        <div v-if="suffix" class="count-flop-unit">{{suffix}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value: [],
                numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                compKey: 0
            };
        },
        props: ["val","suffix"],
        watch: {
            val() {
                this.value = this.val.toString().split("");
                this.compKey += 1;
            }
        },
        created() {
            this.value = this.val.toString().split("");
        },
    };
</script>
<style scoped>
    .count-flop {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-family: Gotham;
        font-size: 48px;
        color: #FFFFFF;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }

    .count-flop > div {
        position: relative;
        display: inline-block;
        overflow: hidden;
        height: 100%;
    }

    .count-flop-box {
        margin-right: 6px;
        width: 34px;
        background-color: #20214d;
        height: 57px;
        line-height: 48px;
        border-radius: 4px;
    }

    .count-flop-point {
        margin-right: 5px;
        width: 10px;
    }

    .count-flop-content {
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        animation-fill-mode: forwards !important;
    }
    .count-flop-unit {
        width: 68px;
        height: 50px;
        line-height: 50px;
        background-color: #20214d;
        border-radius: 4px;
        text-align: center;
        font-size: 16px;
        align-items: center;
        letter-spacing: 0.1em;
        color: #FFFFFF;
    }
    .rolling_0 {
        animation: rolling_0 2.1s ease;
    }

    @keyframes rolling_0 {
        from {
            transform: translateY(-90%);
        }
        to {
            transform: translateY(0);
        }
    }

    .rolling_1 {
        animation: rolling_1 3s ease;
    }

    @keyframes rolling_1 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-10%);
        }
    }

    .rolling_2 {
        animation: rolling_2 2.1s ease;
    }

    @keyframes rolling_2 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-20%);
        }
    }

    .rolling_3 {
        animation: rolling_3 3s ease;
    }

    @keyframes rolling_3 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-30%);
        }
    }

    .rolling_4 {
        animation: rolling_4 2.1s ease;
    }

    @keyframes rolling_4 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-40%);
        }
    }

    .rolling_5 {
        animation: rolling_5 3s ease;
    }

    @keyframes rolling_5 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-50%);
        }
    }

    .rolling_6 {
        animation: rolling_6 2.1s ease;
    }

    @keyframes rolling_6 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-60%);
        }
    }

    .rolling_7 {
        animation: rolling_7 3.1s ease;
    }

    @keyframes rolling_7 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-70%);
        }
    }

    .rolling_8 {
        animation: rolling_8 2.1s ease;
    }

    @keyframes rolling_8 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-80%);
        }
    }

    .rolling_9 {
        animation: rolling_9 3.6s ease;
    }

    @keyframes rolling_9 {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-90%);
        }
    }
</style>

2、在页面中引入组件

<template>
    <div class="select" style="font-size: 16px;">
      <ScrollNumber :val="formatNumber(val,2,1)"></ScrollNumber>
    </div>
</template>

<script>
import ScrollNumber from "./scrollNumber.vue";

export default {
  components: {
    ScrollNumber,
  },
  data() {
    return {
      val: 1632.1
    };
  },
  methods: {
    /**
     * formatNumber()
     * 将数值四舍五入后格式化.
     *
     * @param num 数值(Number或者String)
     * @param cent 要保留的小数位(Number)
     * @param isThousand 是否需要千分位 0:不需要, 1:需要(数值类型);
     * @return 格式的字符串,如'1,234,567.45'
     * @type String
    */
    formatNumber(num, cent, isThousand) {
      num = num.toString().replace(/\$|\,/g, "");
      if (isNaN(num)) num = "0";
      var sign = num == (num = Math.abs(num));
      num = parseFloat(num.toFixed(cent));
      num = num.toString();
      var cents;
      if (num.lastIndexOf(".") != -1) {
        let index = num.lastIndexOf(".");
        cents = num.substring(index + 1, num.length);
      } else {
        cents = "";
      }
      num = Math.floor(num * Math.pow(10, cent) + 0.50000000001);
      num = Math.floor(num / Math.pow(10, cent)).toString();
      if (isThousand) {
        for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
          num = num.substring(0, num.length - (4 * i + 3)) + "," + num.substring(num.length - (4 * i + 3));
      }
      if (cent > 0) {
        if (cents == "") {
          return (sign ? "" : "-") + num;
        } else {
          return (sign ? "" : "-") + num + "." + cents;
        }
      } else {
        return (sign ? "" : "-") + num;
      }
    },
  },
  mounted() {
    setInterval(() => {
      this.val += 1
    }, 3000)
  }
}

</script>

<style lang="less" scoped>
.select {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 20px;
    height: 600px;
}
</style>

3、注意

1)formatNumber函数说明
封装一个数字函数,功能包含:千分位、保留小数、小数末尾抹零
2)用了一个定时函数,用来看翻页效果,可以自行调接口渲染数据

4、不足多进言

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

(0)

相关推荐

  • vue 实现滚动到底部翻页效果(pc端)

    pc端vue 滚动到底部翻页 效果,具体内容如下所示: html: <div class="list" ref="scrollTopList"> <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)"> <span cla

  • vue 翻页组件vue-flip-page效果

    方法 change (改变页面) tap  (点击) turning  (正在翻页) prev  (前一页) next   (后一页) 翻到指定页面: handleSwitchManual(index) { if (index === this.currentIndex) return; this.$refs["turn"].toPage(index); this.currentIndex = index; this.goods_id = this.manuals[this.curre

  • 基于vue实现分页/翻页组件paginator示例

    序言 项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教 当页数小于999(包括999)页 页数大于999页 首页或尾页disabled 10页之内显示 Usage 参数 pageCount: 整数,代表总页数 监听事件 @togglePage: 监听切换页面事件,可以获取到当前前往页的页数 父组件调用方法 index.vue <template lang="html"> <div> <paginator :pageCount=

  • vue router自动判断左右翻页转场动画效果

    前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作为一个组件 最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得, 一般的移动端口单页应用在跳转页面时候会有相应的转场动画,比如: 1. 从当前一级页面跳转二级页面需要展示的转场动画是一级页面向屏幕左边移动消失的同时, 二级页面从屏幕的右边向左边移动出现.(类似翻书翻到

  • vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是

  • 基于Vuejs框架实现翻页组件

    翻页功能对前端后端都是个难题啊!今天终于给踩了!哈哈!整理下方法,我是基于vueJs写的,同样适用于angular哈! 封装下载地址:vue.js翻页组件 效果截图: 整体实现逻辑,当用户点击页码时,ajax从后端获取数据,包括:records(当前页查询到的记录),totalRecords: 121(所有记录),currentPage(当前页码),totalPage(总页码),size(当前页显示数量),之后用我封装的算法assemblePageTurnerParams,算出页面展示哪些页码.

  • 基于Vue2.0+ElementUI实现表格翻页功能

    Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本.在这个月的 NingJS 上我们开源了这个项目,当时它的文档还没有准备好.今天,经过两周多的完善, Element UI 的文档正式上线啦!目前它处于 rc 阶段,正式版将于 Vue 2.0 发布后第一时间跟进. 欢迎大家来使用和完善,一起把它做成 Vue 最好的企业级组件库. ElementUI的表格要求的数据类型为字典数组.我使用了py

  • vue+animation实现翻页动画

    本文实例为大家分享了vue+animation实现翻页动画展示的具体代码,供大家参考,具体内容如下 前端在做数据展示的时候,可能提留页面时间较长,导致数据不能及时更新,你可以定时更新,也可以做一个假数据 给用户视觉上的体验,接下来就是第二种,假数据,它用了C3 animation 实现了一个翻页动画. 第一种是单独运动 <template> <div> <div> <ul> <li v-for="(item,i) in NumberList&

  • Vue2.0+ElementUI实现表格翻页的实例

    ElementUI的表格要求的数据类型为字典数组.我使用了python3写后端,那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可.取出后我将其存入redis数据库方便之后取用.取用时使用eval()函数再传到前端即可. 前端放置Pagination 分页器,我这里直接采用了完整功能的分页器. <el-pagination @size-change="handleSizeChange" @current-change=&q

  • Vue实现简易翻页效果源码分享

    源码如下: <html> <head> <meta charset="UTF-8"> <title>slidePage</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style type="text/css"> *{ margin

随机推荐