滚动过程中截图
滚动结束截图
实现原理:将0123456789十个数字一一纵向排列,设置高度只显示一个数字,使用transform: translate变换显示数字,代码如下:
<template>
<div class="chartNum">
<div class="box-item">
<div
v-for="(item, index) in orderNum"
:key="index"
:class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
>
<span>
<i ref="numberItem">0123456789</i>
</span>
<span
v-if="(index+1)%3===0&&index!==orderNum.length-1"
class="comma"
style="position: absolute;left: 1.89vw;top: 1vw;"
>,</span>
<span
v-if="index===orderNum.length-1&&!isNaN(item)"
style="position: absolute;left: 2.1vw;top: 2.5vw;font-weight: 500;font-size: 0.9vw;font-family: none;"
class="comma"
>
元
</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
// 显示的数字
number: {
type: Number,
default: 0
},
// 显示的长度
length: {
type: Number,
default: 9
}
},
data() {
return {
orderNum: [] // 默认总数
}
},
watch: {
number: {
handler(val) {
this.toOrderNum(val)
},
deep: true
}
},
mounted() {
this.orderNum = []
for (let i = 0; i < this.length; i++) {
this.orderNum.push('0')
}
setTimeout(() => {
this.toOrderNum(this.number) // 这里输入数字即可调用
}, 500)
},
methods: {
// 设置文字滚动
setNumberTransform() {
const numberItems = this.$refs.numberItem // 拿到数字的ref,计算元素数量
// 结合CSS 对数字字符进行滚动,显示数量
for (let index = 0; index < this.orderNum.length; index += 1) {
const elem = numberItems[index]
elem.style.transform = `translate(-50%, -${this.orderNum[index] * 10}%)`
}
},
// 处理总数字
toOrderNum(num) {
const numtext = num.toString()
if (this.length) {
if (numtext.length < this.length) {
const numlist = `0${numtext}` // 如未满固定数,添加"0"补位
this.toOrderNum(numlist) // 递归添加"0"补位
} else if (numtext.length === this.length) {
this.orderNum = numtext.split('')
}
} else {
this.orderNum = numtext.split('')
}
this.setNumberTransform()
}
}
}
</script>
<style scoped lang="scss">
.chartNum{
color: #409eff;
display: flex;
align-items: flex-end;
justify-content: center;
/*总量滚动数字设置*/
.box-item {
font-size: 4.2vw;
font-family: "impact", serif;
display: flex;
align-items: center;
}
/* 默认逗号设置 */
.mark-item {
width:2.6vw;
height: 5.2vw;
text-align: center;
margin-left: -1vw;
}
/*滚动数字设置*/
.number-item {
width: 2.7vw;
height: 5.2vw;
margin-right: 1vw;
position: relative;
/* 背景图片 */
background-image: url("~@/assets/images/masterSelection/number-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
& > span {
position: relative;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
& > i {
font-style: normal;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
}
}
&:last-child{
margin-right: 0;
}
}
.unit{
font-weight: 500;
font-size: 0.9vw;
margin-left: 0.3vw;
}
}
</style>