171 lines
4.1 KiB
Vue
171 lines
4.1 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- num 是字符串，会被切成片渲染 -->
|
||
<view class="l-num" :style="{width: key===',' || key==='.'?'12rpx':'28rpx'}" v-for="(key,value) in num" :key="value">
|
||
<template v-if="key !== '.' && key !== ','">
|
||
<view class="l-son" :style="'transform: translateY(-'+(key*52)+'rpx);'" >
|
||
<view class="l-num l-posi" v-for="(s,i) in range" :style="'transform: translateY('+(i*52)+'rpx);'" :key="i">
|
||
{{s}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 小数点 -->
|
||
<view class="l-num l-posi" v-else>{{key}}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
let range = new Array(10).fill(0).map((e,i) => i);
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
num:'0.00', //当前显示数字
|
||
value:'', //当前数字
|
||
range:range,//0-9
|
||
turnTime: 100//定时器时间 单位毫秒 可控制数字滚动快慢 数字越高滚动频率越慢
|
||
}
|
||
},
|
||
props:{
|
||
number:{
|
||
type: String,
|
||
default:''
|
||
}
|
||
},
|
||
watch:{
|
||
number:{
|
||
handler(value){
|
||
this.value = value;
|
||
this._getNumber();
|
||
},
|
||
immediate:true,
|
||
deep:true
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
|
||
// 这里是保留两位小数的
|
||
_getNumber(){
|
||
let value = this.value
|
||
let num = this.num;
|
||
|
||
if(num == value){
|
||
return
|
||
}
|
||
// 我的思路是把数字切成一个数组，每个字符对应一个下标
|
||
this.showNumber = num.toString().split('');
|
||
this.nowNumber = value.toString().split('');
|
||
let newShowNumber = []
|
||
let newNowNumber = []
|
||
|
||
this.showNumber.forEach(item=>{
|
||
if (item!==',' && item!=='.'){
|
||
newShowNumber.push(Number(item))
|
||
}else{
|
||
newShowNumber.push(item)
|
||
}
|
||
})
|
||
this.nowNumber.forEach(item=>{
|
||
if (item!==',' && item!=='.'){
|
||
newNowNumber.push(Number(item))
|
||
}else{
|
||
newNowNumber.push(item)
|
||
}
|
||
})
|
||
this.showNumber = newShowNumber
|
||
this.nowNumber = newNowNumber
|
||
|
||
let sl = this.showNumber.length;
|
||
let ol = this.nowNumber.length;
|
||
|
||
let key = sl > ol ? 'nowNumber' : 'showNumber';
|
||
|
||
// 这个函数是用来补位的，例如原来是1，新数字是100，那么要给位数少的补位 1 ==> 001
|
||
this._formatNumber(key,sl,ol);
|
||
|
||
// 这个是数字变化滚动的具体函数
|
||
this._turnNumber();
|
||
},
|
||
|
||
_formatNumber(key,oldV,newV){
|
||
let length = Math.abs(oldV - newV);
|
||
let arr = new Array(length).fill(0);
|
||
this[key] = arr.concat(this[key]);
|
||
},
|
||
|
||
_turnNumber(){
|
||
|
||
let _this = this;
|
||
// 循环数字数组，
|
||
_this.showNumber.forEach((e,i) => {
|
||
// 判断对应位数的值，如果相等就跳过
|
||
if(e == _this.nowNumber[i]) return;
|
||
|
||
let inter = setInterval(() => {
|
||
// 数值相等后清除定时器
|
||
if(e == _this.nowNumber[_this._index(i)]){
|
||
clearInterval(inter);
|
||
}else{
|
||
if (e!==',' && e!=='.'){
|
||
// 如果大于就 -- 小于就 ++
|
||
_this.showNumber[_this._index(i)] = e > _this.nowNumber[_this._index(i)] ? --e : ++e;
|
||
// 每次值变化都更新到视图上，这样看上去就像是滚动了一下。好吧，其实就是滚动了
|
||
_this.num = parseFloat(_this.showNumber.join('')).toFixed(2);
|
||
_this.num = _this.$util.fmoney(_this.num,2)
|
||
}else{
|
||
clearInterval(inter);
|
||
}
|
||
}
|
||
},_this.turnTime);
|
||
})
|
||
},
|
||
// 保留当前i的值
|
||
_index(i){
|
||
return i
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content{
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.l-input{
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.l-num{
|
||
font-size: 48rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 56rpx;
|
||
display: inline-block;
|
||
text-align: center;
|
||
height: 56rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.l-son{
|
||
width: 100%;
|
||
height: calc(100% * 10);
|
||
position: relative;
|
||
transition:all 0.5s;
|
||
}
|
||
|
||
.l-posi{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
margin: 0;
|
||
border: none;
|
||
}
|
||
</style>
|