<template>
<view style="box-sizing: border-box;">
<view class="hideWrap" :style="hideWrapWidth">
<view class="numWrap" :style="item1.position" v-for="(item1,index) in newNum" :key="index">
<view v-for="(item,index) in defaultNum" :style="item1.isDecimal?'font-size: 38rpx;':''"
class="numItemWrap">
{{item}}
</view>
</view>
</view>
<view @click="changeNum()">
添加
</view>
</view>
</template>
<script>
export default {
data() {
return {
numWrapWidth: 30,
hideWrapWidth: 'width:210rpx;',
num: '21328.13',
newNum: [{
num: '0',
position: 'left:0rpx;top:-0%;'
}, {
num: '0',
position: 'left:30rpx;top:-0%;'
}, {
num: '0',
position: 'left:60rpx;top:-0%;'
}, {
num: '0',
position: 'left:90rpx;top:-0%;'
}, {
num: '0',
position: 'left:120rpx;top:-0%;'
}, {
num: '0',
position: 'left:150rpx;top:-0%;'
}, {
num: '0',
position: 'left:180rpx;top:-0%;'
}],
defaultNum: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'] //有几位数就遍历多少次defaultNum
}
},
onLoad() {
this.setNum(this.num)
},
methods: {
setNum(num) {
let _this = this;
let newNum = [];
let thisNum = (num + '').split('');
let leftPx = 0;
let isDecimal = false;
for (let i = 0; i < thisNum.length; i++) {
if (thisNum[i] === '.') {
isDecimal = true
};
let data = {};
let topLength = (10 - thisNum[i]);
let left = `left:${leftPx}rpx;`;
let top = `top:-${thisNum[i] === '.'?'1000':(10-topLength)*100}%;`;
data.num = thisNum[i]
data.position = left + top
if (isDecimal) {
data.isDecimal = true;
}
newNum.push(data);
leftPx = leftPx + this.numWrapWidth
};
this.hideWrapWidth = `width:${leftPx}rpx;`
setTimeout(() => {
this.newNum = newNum;
}, 10);
},
changeNum() {
this.num = this.random(1000, 100000)
this.setNum(this.num.toFixed(2))
},
random(min, max) {
return Math.random() * (max - min) + min;
}
},
}
</script>
<style scoped>
.hideWrap {
position: relative;
height: 80rpx;
overflow: hidden;
/* border: 1px solid; */
margin: 200rpx auto;
display: flex;
align-items: center;
justify-content: center;
}
.numWrap {
position: absolute;
top: 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
/* Firefox 4 */
-webkit-transition: all 0.5s;
/* Safari 和 Chrome */
-o-transition: all 0.5s;
/* Opera */
}
.numItemWrap {
text-align: center;
width: 30rpx;
line-height: 80rpx;
font-size: 44rpx;
height: 80rpx;
font-weight: 500;
color: #4CD964;
}
</style>
思路:把每个数字拆分开显示再加上滚动效果
效果: