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 相关文章推荐
ExtJs使用IFrame的实现代码
Mar 24 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
利用JS实现数字增长
Jul 28 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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 + Laravel如何实现部署自动化详解
2017/10/11 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
土建资料员岗位职责
2014/01/04 职场文书
即兴演讲稿
2014/01/04 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
单位单身证明范本
2014/01/11 职场文书
三查三看党性分析材料
2014/02/18 职场文书
环境工程专业自荐信
2014/03/03 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
党建工作先进材料
2014/05/02 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
求职信内容怎么写
2014/05/26 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
2015年暑期见闻
2015/07/14 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
关于EntityWrapper的in用法
2022/03/22 Java/Android
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript