在uniapp中使用自定义线性进度条

最新推荐文章于 2024-05-04 03:43:43 发布

晒晒u

最新推荐文章于 2024-05-04 03:43:43 发布

阅读量397

点赞数 1

文章标签： uni-app javascript html5

本文链接：https://blog.csdn.net/fairyfree/article/details/136943517

版权

本文介绍了如何在Vue应用中使用`u-line-progress`组件创建一个带有动态颜色和进度显示的条形进度条，包括striped样式和百分比信息的定制。

摘要由CSDN通过智能技术生成

在这里插入图片描述
效果如上

<u-line-progress :striped-active="true" :striped="true" :percentinfo="val.percentinfo" :round="true"  height="28" :active-color="val.color?val.color:'#18D775'" inactive-color="#CDE2DA" :percent="val.reachratio?val.reachratio:100"
	:show-percent="showPercent">
	<view class="u-percentage-slot" activeColor="#18D775">
		<text style="margin-right: 20rpx;">{{val.reachnum || 0}}/{{val.targetnum || 0}}</text>
		<!-- <text style="position: absolute;margin-left: 14rpx;color: #20242A;">{{40%}}
		</text> -->
	</view>
</u-line-progress>