展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
- 通过
percentage设置当前的进度值，该值区间为0-100. - 通过
activeColor设置进度条的颜色
<template> <u-line-progress :percentage="30" activeColor="#ff0000"></u-line-progress> </template>
copy
#不显示百分比
不显示百分比值信息
show-text参数配置是否显示进度条内百分值
<template> <u-line-progress :percentage="30" :showText="false"></u-line-progress> </template>
copy
#自定义高度
height进度条高度
<template> <u-line-progress :percentage="30" height="8"></u-line-progress> </template>
copy
#自定义样式(不支持安卓环境的nvue)
- 自定义的数值样式嵌套在默认插槽里
<template> <u-line-progress :percentage="30"> <text class="u-percentage-slot">{{30}}%</text> </u-line-progress> </template> <style lang="scss" scoped> .u-percentage-slot { padding: 1px 5px; background-color: $u-warning; color: #fff; border-radius: 100px; font-size: 10px; margin-right: -5px; } </style>
copy
#手动加减
- 通过控制
percentage参数数值达到增减
<template> <view style="margin-top: 50px;"> <u-line-progress :percentage="percentage" /> <view style="display: flex;margin-top: 100px;"> <button @click="computedWidth('minus')">减少</button> <button @click="computedWidth('plus')">增加</button> </view> </view> </template> <script> export default { data() { return { percentage: 30, } }, methods:{ computedWidth(type) { if(type === 'plus') { this.percentage = uni.$u.range(0, 100, this.percentage + 10) } else { this.percentage = uni.$u.range(0, 100, this.percentage - 10) } } } } </script>
