LineProgress 线形进度条

用于展示进度信息，是一个线性进度条。

平台差异说明

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

基本使用

• 通过percent设置当前的进度值，该值区间为0-100。
• 通过activeColor设置进度条的颜色。

<tn-line-progress :percent="50" activeColor="#01BEFF"></tn-line-progress>

设置进度条活动时的动画效果

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

<tn-line-progress :percent="50" :striped="true" :stripedAnimation="true"></tn-line-progress>

在进度条内显示当前的进度值

可以通过设置showPercent参数来设置是否在进度条中显示进度。

提示：如果设置进度条的高度太小可能会导致进度值无法显示或者显示完整。

<tn-line-progress :percent="50" activeColor="#01BEFF" :showPercent="true"></tn-line-progress>

自定义进度条内显示的内容

自定义进度条中显示的内容只需要将要显示的内容填写在tn-line-progress内部（默认插槽）即可，使用自定义内容后showPercent参数会失效。

<tn-line-progress :percent="50">
  <view class="tn-color-white">加载中</view>
</tn-line-progress>

API

Props

属性名	说明	类型	默认值	可选值
percent	进度条百分比值，0-100	Number	0	-
height	进度条高度，单位rpx	Number	28	-
round	将进度条两端显示为圆角	Boolean	true	false
striped	显示条纹	Boolean	false	true
stripedAnimation	将条纹设置为有运动效果，在striped为true时生效	Boolean	true	false
activeColor	进度条激活部分的颜色	String	#01BEFF	-
inactiveColor	进度条非激活部分的颜色	String	#F0F0F0	-
showPercent	显示进度条进度值	Boolean	false	true

Slots

名称	说明
default	存放用户自定义进度条内的内容，会覆盖进度值的显示

Event

none