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 必填项判断表单是否为空的方法
Sep 14 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
js确定对象类型方法
Mar 30 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
Python获取央视节目单的实现代码
2015/07/25 Python
python决策树之C4.5算法详解
2017/12/20 Python
python实现井字棋小游戏
2020/03/04 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
会议邀请书范文
2014/02/02 职场文书
关于元旦的广播稿
2014/02/16 职场文书
运动会口号8字
2014/06/07 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
大学生在校表现评语
2014/12/31 职场文书
个人求职自荐信范文
2015/03/06 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
golang特有程序结构入门教程
2021/06/02 Python
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python