vue实现数字滚动效果


Posted in Javascript onJune 29, 2020

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

<template>
 <div class="num-block">
  <div class="num-block_show">
   <div class="num-block_numbers" :class="{'ellipsis': !isNum(item)}" v-for="(item, key) in numbers" :key="key">
    <!-- <ul class="num-block_ul" :style="ulStyles(noNumbers(item, key))" v-if="isNum(item)"> -->
    <ul class="num-block_ul" :style="ulStyles(item, key)" v-if="isNum(item)">
     <!-- <li v-for="(opt, index) in noNumbers(item, key)" :key="index">
      {{ opt }}
     </li> -->
     <li>0</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
     <li>7</li>
     <li>8</li>
     <li>9</li>
    </ul>
    <div class="num-block_ellipsis" v-else>,</div>
   </div>
  </div>
  <!-- <div style="position:absolute;top:250px;left:0">
   {{ this.numbers }}
  </div> -->
 </div>
</template>

<script>
 export default {
  name: "ws-num-block",
  props: ['data'],
  data() {
   return {
    currentData: '10',
    lastData: '10'
   }
  },
  computed: {
   numbers() {
    let data = this.data;
    if(!data) {
     return
    }
    data = this.dealData(data);
    return data;
   }
  },
  watch: {
   data(val){
    let lastData = this.currentData;
    this.currentData = this.dealData(val);
    this.lastData = lastData;
   }
  },
  methods: {
   noNumbers(item, key) {
    let lastData = this.lastData;
    let lastItem = this.lastData[key];
    let result = [];
    lastItem = lastItem ? lastItem : '0';
    if(lastItem != item) {
     if(lastItem == ',' || item == ',') {
      result.push(item);
      return result;
     }else {
      let meal = 0;
      if(Number(item) < Number(lastItem)) {
       meal = Number(item) + 10 - Number(lastItem);
      }else {
       meal = Number(item) - Number(lastItem);
      }
      for(let i=0;i<meal+1;i++) {
       if(Number(lastItem) > 9) {
        lastItem = 0;
       }
       result.push(lastItem.toString());
       lastItem++;
      }
      return result;
     }
    }else {
     result.push(item);
     return result;
    }
   },
   // ulStyles(arr) {
   ulStyles(item, key) {
    // if(!arr) {
    //  return
    // }
    let top = 0;
    // let currentTop = -26 * Number(arr.length-1);
    let currentTop = -30 * Number(item);
    top = currentTop + 'px';
    // top = 0;
    return {
     'position': 'absolute',
     'left': 0,
     'top': top,
     'width': '12px',
     'list-style': 'none',
     'padding': '0',
     'margin': '0',
     'transition': '1s'
    }
   },
   isNum(val) {
    return val == ',' ? false : true
   },
   dealData(val) {
    let vals = val.toString().split('').reverse();
    let dealData = [];
    for(let i=0;i<vals.length;i++) {
     if( i > 0 && i%3 == 0 ) {
      dealData.push(',');
     }
     dealData.push(vals[i]);
    }
    dealData = dealData.reverse().join('');
    return dealData;
   }
  }
 };
</script>
<style lang="sass">
 .num-block
  width: 100%
  height: auto
  &_show
   display: flex
   justify-content: center
   height: 30px
   overflow: hidden
  &_numbers
   position: relative
   width: 14px
  &_numbers.ellipsis
   width: 6px
  &_ul>li
   height: 30px
   line-height: 30px
  &_ellipsis
   position: absolute
   left: 0
   top: 0
   width: 6px
</style>

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

Javascript 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
JS hashMap实例详解
May 26 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
Ajax实现三级联动效果
Oct 05 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 #Javascript
Vue实现可移动水平时间轴
Jun 29 #Javascript
uniapp与webview之间的相互传值的实现
Jun 29 #Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 #Javascript
iview实现图片上传功能
Jun 29 #Javascript
vue+animation实现翻页动画
Jun 29 #Javascript
vue+element实现图片上传及裁剪功能
Jun 29 #Javascript
You might like
PHP实现网上点歌(二)
2006/10/09 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python 的AES加密与解密实现
2019/07/09 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
基于python实现操作redis及消息队列
2020/08/27 Python
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
物流仓管员工作职责
2014/01/06 职场文书
人事主管岗位职责
2014/01/30 职场文书
委托书范文
2014/04/02 职场文书
《凡卡》教学反思
2014/04/09 职场文书
小学班主任评语大全
2014/04/23 职场文书
小学数学课后反思
2014/04/23 职场文书
大学生求职信
2014/06/17 职场文书
交通安全横幅标语
2014/10/07 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
mysql 获取时间方式
2022/03/20 MySQL