支付寶小程序基礎(chǔ)組件 進度條·Progress

2020-09-18 11:07 更新

當頁面在請求數(shù)據(jù)過程中,會出現(xiàn)信息讀取的進度過程。

掃碼體驗

示例代碼

<!-- API-DEMO page/component/progress.axml -->
<view class="page">
  <view class="page-description">進度條</view>
  <view class="page-section">
    <view class="page-section-demo">
      <progress percent="20" show-info/>
      <progress percent="40" active/>
      <progress percent="60" stroke-width="10"/>
      <progress percent="80" active-Color="#6abf47" backgroundColor="#f4333c" />
    </view>
  </view>
</view>
// API-DEMO page/component/progress.js
Page({});
/* API-DEMO page/component/progress.acss */
progress{
  margin-bottom: 60rpx;
}

屬性

屬性名 類型 默認值 描述 最低版本
percent Float - 百分比(0~100)。 -
show-info Boolean show-info="{{false}}" 在右側(cè)顯示百分比值。 -
stroke-width Number 6 線的粗細,單位 px。 -
active-color Color #09BB07 已選擇的進度條顏色。 -
background-color Color - 未選擇的進度條顏色。 -
active Boolean active="{{false}}" 是否添加從0%開始加載的入場動畫。 -
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號