微信小程序内容组件 progress


本文整理自网络,侵删。

progress

基础库 1.0.0 开始支持,低版本需做兼容处理。

进度条。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性类型默认值必填说明最低版本
percentnumber百分比0~1001.0.0
show-infobooleanfalse在进度条右侧显示百分比1.0.0
border-radiusnumber/string0圆角大小2.3.1
font-sizenumber/string16右侧百分比字体大小2.3.1
stroke-widthnumber/string6进度条线的宽度1.0.0
colorstring#09BB07进度条颜色(请使用activeColor)1.0.0
activeColorstring#09BB07已选择的进度条的颜色1.0.0
backgroundColorstring#EBEBEB未选择的进度条的颜色1.0.0
activebooleanfalse进度条从左往右的动画1.0.0
active-modestringbackwardsbackwards: 动画从头播;forwards:动画从上次结束点接着播1.7.0
durationnumber30进度增加1%所需毫秒数2.8.2
bindactiveendeventhandle动画完成事件2.4.1

示例代码

<view class="progress-box">
  <progress percent="20" show-info stroke-width="3"/>
</view>

<view class="progress-box">
  <progress percent="40" active stroke-width="3" />
  <icon class="progress-cancel" type="cancel"></icon>
</view>

<view class="progress-box">
  <progress percent="60" active stroke-width="3" />
</view>

<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>





标签:微信小程序

相关阅读 >>

微信小程序 运维中心getscenelist

微信小程序云开发sdk文档 文件存储下载文件

微信小程序api 富文本-editorcontext实例

微信小程序画布 canvas

微信小程序 扩展组件绘制canvas

微信小程序api 图片-获取图片信息

微信小程序 分享到朋友圈(beta)

微信小程序云开发服务端数据库api 指定筛选条件

微信小程序 基础组件

微信小程序api nfc-取消事件监听

更多相关阅读请进入《微信小程序》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...