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 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
JS hashMap实例详解
May 26 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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 计划任务 检测用户连接状态
2012/03/29 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
wxPython中文教程入门实例
2014/06/09 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python实现flappy bird游戏
2018/12/24 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Python接口测试文件上传实例解析
2020/05/22 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
阿巴庭院:Abba Patio
2019/06/18 全球购物
时尚休闲吧创业计划书
2014/01/25 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
优秀医生事迹材料
2014/02/12 职场文书
开工仪式主持词
2014/03/20 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
大学毕业生个人总结
2015/02/28 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python