当前位置: 首页 > 编程笔记 >

vue实现数字滚动效果

湛鸿
2023-03-14
本文向大家介绍vue实现数字滚动效果,包括了vue实现数字滚动效果的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍基于jQuery实现数字滚动效果,包括了基于jQuery实现数字滚动效果的使用技巧和注意事项,需要的朋友参考一下 滚动方向:上下 源代码下载 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • vue怎么实现滚动条隐藏但有滚动效果

  • 本文向大家介绍javascript实现文字无缝滚动效果,包括了javascript实现文字无缝滚动效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下 html js 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍iOS实现滚动字幕的动画特效,包括了iOS实现滚动字幕的动画特效的使用技巧和注意事项,需要的朋友参考一下 效果图 开始上代码 滚动字幕的原理是用timer定时器间隔一定的时间来驱动scrollView上的内容偏移,来实现滚动的效果,原理比较简单,关键是有些细节需要处理好,实现流畅效果的同时要考虑到性能优化 这里是.h文件的接口方法及属性,可适应大部分自定义场景 实现滚动字幕的思路和无

  • 本文向大家介绍Js实现滚动变色的文字效果,包括了Js实现滚动变色的文字效果的使用技巧和注意事项,需要的朋友参考一下 Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了。 以下是源代码:

  • 本文向大家介绍vue监听滚动事件实现滚动监听,包括了vue监听滚动事件实现滚动监听的使用技巧和注意事项,需要的朋友参考一下 在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!