Commit 0e3617fd authored by Jenny's avatar Jenny

feat: 数字滚动修改

parent 5ac58102
<template>
<view class="count-to" :style="{height: `${height}px`,}">
<NormalTitle :elementInfo="elementInfo"></NormalTitle>
<!-- warning:count-to的font-size单位为rpx -->
<u-count-to :start-val="startVal" :end-val="endVal" :duration="duration" separator="," :color="elementInfo.option.countTo.color" :font-size="getFontSize()"></u-count-to>
<view class="count-to" :style="{
backgroundColor: elementInfo.option.countTo.backgroundColor
}">
<NormalTitle :elementInfo="elementInfo"></NormalTitle>
<u-count-to
:start-val="startVal"
:end-val="endVal"
:duration="duration"
separator=","
:color="elementInfo.option.countTo.color"
:font-size="getFontSize()"
></u-count-to>
</view>
</template>
......@@ -15,15 +23,9 @@
return {
startVal: 0,
endVal: 0,
height: 0,
duration: 2000
};
},
onReady() {
this.getComponentHeight()
},
},
methods: {
initChart() {
this.$nextTick(() => {
......@@ -34,31 +36,23 @@
}
})
},
// 计算组件高度
getComponentHeight() {
const {windowWidth} = uni.getSystemInfoSync()
this.height = this.elementInfo.height
if (this.elementInfo.width > windowWidth) {
this.height = this.elementInfo.height / this.elementInfo.width * windowWidth
}
},
getFontSize() {
return this.$u.common.pxToRpx(this.elementInfo.option.countTo.fontSize)
}
},
}
}
</script>
<style>
.count-to {
font-size: 30px;
color: #f9bb70;
font-weight: bold;
text-align: center;
width: 100%;
.count-to {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 30px;
color: #f9bb70;
font-weight: bold;
text-align: center;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment