uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法

目录

平台差异说明

#基本使用

#设置进度条动画效果

#设置进度条内部显示百分比值

#修改进度条的样式

#API

#Props

#Slots

---

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

#基本使用

• 通过percent设置当前的进度值，该值区间为0-100.
• 通过active-color设置进度条的颜色，也可以直接设置type主题颜色(优先起作用)，使用预置值

<u-line-progress active-color="#2979ff" :percent="70"></u-line-progress>

#设置进度条动画效果

该效果会在已完成的百分比部分显示移动的条纹(具体见示例效果)

• striped参数配置是否显示条纹
• striped-active参数配置条纹是否具有动态效果

<u-line-progress :striped="true" :percent="70" :striped-active="true"></u-line-progress>

#设置进度条内部显示百分比值

参数为show-percent

• 说明：进度条可以通过height设置高度，如果高度太小的话，是无法在内部显示当前的百分比值的

<u-line-progress :percent="70" :show-percent="true"></u-line-progress>

#修改进度条的样式

• active-color参数修改激活部分的颜色
• round参数设置进度条两端是否为半圆

<u-line-progress :percent="70" :round="false" active-color="#ff9900"></u-line-progress>

#API

#Props

参数	说明	类型	默认值	可选值
percent	进度条百分比值，为数值类型，0-100	String | Number	-	-
round	进度条两端是否为半圆	Boolean	true	false
type	如设置，active-color值将会失效	String	-	success / primary / error / info / warning
active-color	进度条激活部分的颜色	String	#19be6b	-
inactive-color	进度条的底色，默认为灰色	String	#ececec	-
show-percent	是否在进度条内部显示当前的百分比值数值	Boolean	true	false
height	进度条的高度，单位rpx	String | Number	28	-
striped	是否显示进度条激活部分的条纹	Boolean	false	true
striped-active	条纹是否具有动态效果	Boolean	false	true

#Slots

名称	说明
default?1.5.4	传入自定义的显示内容，将会覆盖默认显示的百分比值