3-6 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高亮态进度条的颜色,支持纯色与线性渐变色。默认值 "#ffca49, #ffb262"。若只填一个色值,则进度条显示为该纯色值。1.0.0
backgroundColorstring#EBEBEB未选择的进度条的颜色1.0.0
activebooleanfalse进度条从左往右的动画1.0.0
active-modestringbackwardsbackwards: 动画从头播;forwards:动画从上次结束点接着播1.7.0
bindactiveendeventhandle 动画完成事件2.4.1

示例代码

在开发者工具中预览效果

<view>
  <progress 
  percent="20" 
  show-info 
  font-size="20"
  stroke-width="5"
  backgroundColor="#13BEFB"
  activeColor="#DE5347"
  />

  <progress
  class='xxx'
  percent="40" 
  stroke-width="20" 
  border-radius="30"
  />

  <progress percent="60" color="pink" />

  <progress 
  percent="{{nPercent}}" 
  active />
</view>

<view class='btnV'>
  <view class='btn1' bindtap='clickBtn'>点击开始加载</view>
</view>
progress{
  margin-top: 50rpx;
}

.xxx{
  width: 100rpx;
}

.btn1{
  margin-top: 100rpx;
  width: 200px;
  height: 44px;
  color: white;
  background-color: #DE5347;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnV{
  display: flex;
  justify-content: center;
}
Page({
  data: {
    nPercent:0,
    flag:true,
  },

  clickBtn:function(e){
    for (let i = 0; i < 100; i++) {
      this.setData({
        nPercent: i
      })
      console.log(this.data.nPercent)
    }
  }
})

  

以上内容来自文本:https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值