uView2 LineProgress进度太小时显示不全的一种解决办法

最新推荐文章于 2025-09-23 17:00:00 发布

原创最新推荐文章于 2025-09-23 17:00:00 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #uview

vue 专栏收录该内容

6 篇文章

订阅专栏

博客针对uView 2.0.34版本进度条在短且进度小时只显示百分号甚至不显示的问题，给出解决办法。先通过uView中LineProgress的getProgressWidth方法获取进度条宽度，再对标签进行修改，具体调整需自行操作，并展示了效果图。

uView版本：2.0.34

在进度条比较短，进度又比较小时，就有有只显示一个百分号，甚至百分号都不显示的情况，如图

以下是我的解决办法：

布局：

<u-line-progress ref="progressBar" :percentage="10"></u-line-progress>

1、获取progress的宽度

uView中的LineProgress有个getProgressWidth方法，在promise中可获取整个进度条的宽度，接下来就是稍微改造标签即可

getProgressBarWidth() {
    return new Promise(resolve => {
        this.$refs.progressBar.getProgressWidth().then(res => {
             this.progressBarWidth = res.width
             resolve()
         })
    })
}

2、修改标签

<u-line-progress ref="progressBar" :percentage="your-progress">
    <text style="position: absolute" 
       :style="{left: `${(progressBarWidth / 2 - 9)}px`,
       color: parseInt(your-progress) > 58 ? '#FFFFFF' : '#333333'}">
       {{ your-progress }}%
    </text>
</u-line-progress>

就这么简单。至于具体需要键多少才居中，需要自己调整；以及百分比到达多少切换颜色，也可以自己调整。

以下是效果图