vue实现数字滚动效果
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要为大家详细介绍了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;:250px;left:0"> {{ this.numbers }} </div> --> </div> </template> <script> export default { name: "ws-num-block", props: ['data'], data() { return { currentData: '10', lastData: '10' } }, puted: { 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 = 0; // let currentTop = -26 * Number(arr.length-1); let currentTop = -30 * Number(item); = currentTop + 'px'; // = 0; return { 'position': 'absolute', 'left': 0, '': , '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 : 0 width: 6px </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:element跨分页操作选择详解
下一篇:js实现从右往左匀速显示图片(无缝轮播)
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程