Commit b8ddde40 authored by leon's avatar leon

fix: countTo and numberScroll issue

parent 93115452
<template> <template>
<view class="count-to" > <view class="count-to" :style="{height: `${height}px`,}">
<BasicText :elementInfo="elementInfo"></BasicText> <BasicText :elementInfo="elementInfo"></BasicText>
<!-- warning:count-to的font-size单位为rpx --> <!-- warning:count-to的font-size单位为rpx -->
<u-count-to :start-val="startVal" :end-val="endVal" :color="elementInfo.option.countTo.color" :font-size="elementInfo.option.countTo.fontSize"></u-count-to> <u-count-to :start-val="startVal" :end-val="endVal" :color="elementInfo.option.countTo.color" :font-size="elementInfo.option.countTo.fontSize"></u-count-to>
...@@ -15,11 +15,14 @@ ...@@ -15,11 +15,14 @@
return { return {
startVal: 0, startVal: 0,
endVal: 0, endVal: 0,
height: 0
}; };
}, },
computed: { onReady() {
this.getComponentHeight()
}, },
methods: { methods: {
initChart() { initChart() {
this.$nextTick(() => { this.$nextTick(() => {
...@@ -27,6 +30,15 @@ ...@@ -27,6 +30,15 @@
this.endVal = this.elementData.dataList.endVal this.endVal = this.elementData.dataList.endVal
}) })
}, },
// 计算组件高度
getComponentHeight() {
const {windowWidth} = uni.getSystemInfoSync()
this.height = this.elementInfo.height
if (this.elementInfo.width > windowWidth) {
this.height = this.elementInfo.height / this.elementInfo.width * windowWidth
}
},
}, },
} }
...@@ -39,6 +51,7 @@ ...@@ -39,6 +51,7 @@
color: #f9bb70; color: #f9bb70;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
width: 100%;
} }
</style> </style>
<template> <template>
<view class="chart-num"> <view class="chart-num" :style="{height: `${height}px`,}">
<BasicText :elementInfo="elementInfo"></BasicText> <BasicText :elementInfo="elementInfo"></BasicText>
<ul class="box-item marginTop20"> <ul class="box-item marginTop20">
<li v-for="(item, index) in orderNum" :key="index" <li v-for="(item, index) in orderNum" :key="index"
...@@ -35,35 +35,47 @@ ...@@ -35,35 +35,47 @@
return { return {
orderNum: [], orderNum: [],
endVal: 100, endVal: 100,
height: 0
}; };
}, },
computed: {
onReady() {
this.getComponentHeight()
}, },
methods: { methods: {
initChart() { initChart() {
this.$nextTick(() => { this.$nextTick(() => {
this.endVal = this.elementData.dataList.endVal this.endVal = this.elementData.dataList.endVal
this.toOrderNumber(this.endVal) this.toOrderNumber(this.endVal)
}) })
}, },
// 计算组件高度
getComponentHeight() {
const {windowWidth} = uni.getSystemInfoSync()
this.height = this.elementInfo.height
if (this.elementInfo.width > windowWidth) {
this.height = this.elementInfo.height / this.elementInfo.width * windowWidth
}
},
toOrderNumber(num) { toOrderNumber(num) {
if (!num) return if (!num) return
// numDigit代表前面预留几个空格 // numDigit代表前面预留几个空格
let len = num.toString().length let len = num.toString().length
this.orderNum = this.$u.common.toThousands(num).split('') this.orderNum = this.$u.common.toThousands(num).split('')
debugger
// len < 8,超过8位,前面不预留空格 // len < 8,超过8位,前面不预留空格
if (this.elementInfo.option.title.numDigit && len < 8) { if (this.elementInfo.option.title.numDigit && len < 8) {
len = len + this.elementInfo.option.title.numDigit len = len + this.elementInfo.option.title.numDigit
// 加上这个没有效果,下面的toThousands会把前面补的0去掉 // 手动往前面填充空格
// num = this.$u.common.fillDigit(num, len)
let l = this.elementInfo.option.title.numDigit let l = this.elementInfo.option.title.numDigit
for(let i = 0 ; i < l; i++) { for(let i = 0 ; i < l; i++) {
this.orderNum.unshift('0') this.orderNum.unshift('0')
} }
} }
debugger
}, },
setTransformByIndex(index) { setTransformByIndex(index) {
...@@ -78,6 +90,10 @@ ...@@ -78,6 +90,10 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.chart-num {
width: 100%;
overflow-x: hidden;
}
.box-item { .box-item {
font-family: '微软雅黑'; font-family: '微软雅黑';
text-align: left; text-align: left;
......
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