微信小程序內(nèi)容組件 progress

2022-05-11 16:06 更新

progress

基礎(chǔ)庫(kù) 1.0.0 開(kāi)始支持,低版本需做兼容處理。

進(jìn)度條。組件屬性的長(zhǎng)度單位默認(rèn)為px,2.4.0起支持傳入單位(rpx/px)。

屬性 類(lèi)型 默認(rèn)值 必填 說(shuō)明 最低版本
percent number 百分比0~100 1.0.0
show-info boolean false 在進(jìn)度條右側(cè)顯示百分比 1.0.0
border-radius number/string 0 圓角大小 2.3.1
font-size number/string 16 右側(cè)百分比字體大小 2.3.1
stroke-width number/string 6 進(jìn)度條線的寬度 1.0.0
color string #09BB07 進(jìn)度條顏色(請(qǐng)使用activeColor) 1.0.0
activeColor string #09BB07 已選擇的進(jìn)度條的顏色 1.0.0
backgroundColor string #EBEBEB 未選擇的進(jìn)度條的顏色 1.0.0
active boolean false 進(jìn)度條從左往右的動(dòng)畫(huà) 1.0.0
active-mode string backwards backwards: 動(dòng)畫(huà)從頭播;forwards:動(dòng)畫(huà)從上次結(jié)束點(diǎn)接著播 1.7.0
duration number 30 進(jìn)度增加1%所需毫秒數(shù) 2.8.2
bindactiveend eventhandle 動(dòng)畫(huà)完成事件 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>


progress


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)