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 传入自定义的显示内容,将会覆盖默认显示的百分比值
相关推荐
web_Hsir41 分钟前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽3 小时前
uniapp编译的app在ios上内存泄漏了
uni-app
大叔_爱编程4 小时前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
咸虾米_15 小时前
uniapp微信小程序获取用户手机号uniCloud云开发版
微信小程序·小程序·uni-app·unicloud·获取手机号
伊泽瑞尔.1 天前
uniapp自定义目录tree(支持多选、单选、父子联动、全选、取消、目录树过滤、异步懒加载节点、v-model)vue版本
uni-app
lyz2468591 天前
uniapp uni-swipe-action滑动内容排版改造
uni-app
IT19951 天前
uniapp笔记-自定义分类组件
前端·笔记·uni-app
MaCa .BaKa1 天前
27-衣橱管理系统(小程序)
java·vue.js·spring boot·小程序·架构·uni-app·maven
Json____1 天前
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
前端·uni-app·h5电商·手机端商城·前端手机端商城·静态商城
耶啵奶膘1 天前
uniapp-小程序地图展示
javascript·小程序·uni-app