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 相关文章推荐
popdiv
Jul 14 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
vue购物车插件编写代码
Nov 27 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
十天学会php(2)
2006/10/09 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
ArrayList类(增强版)
2007/04/04 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
js模块加载方式浅析
2017/08/12 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中使用Inotify监控文件实例
2015/02/14 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
Python内存管理实例分析
2019/07/10 Python
django的csrf实现过程详解
2019/07/26 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
python中pow函数用法及功能说明
2020/12/04 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
白色公司:The White Company
2017/10/11 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
个人查摆剖析材料
2014/10/04 职场文书
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android