小編給大家分享一下微信小程序中progress組件的使用示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年積累的網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有科爾沁左翼免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

微信小程序progress組件的使用方法，具體內(nèi)容如下

效果圖

WXML

 
  show-info在進度條右側(cè)顯示百分比
  
 
 
  stroke-width進度條線的寬度，單位px
  
 
 
  color進度條顏色
  
 
 
  active進度條從左往右的動畫
  
 
 
  backgroundColor未選擇的進度條的顏色
  
 
 
  動態(tài)設(shè)置進度條進度
  
 
 
  
   10%
   30%
   50%
   70%
   90%
  
 

JS

Page({
 data: {
  index: 10
 },
 changeTabbar(e){
  this.setData({ index: e.currentTarget.dataset.id})
 }
})

progress屬性

percent：初始化所占百分比
show-info：進度條右側(cè)是否顯示進度條百分比
stroke-width：進度條寬度，單位px，默認(rèn)為6
color：進度條顏色
activeColor：已選擇的進度條的顏色
backgroundColor：未選擇的進度條的顏色
active：進度條從左往右的動畫
active-mode：backwards: 動畫從頭播；forwards：動畫從上次結(jié)束點接著播

以上是“微信小程序中progress組件的使用示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：微信小程序中progress組件的使用示例-創(chuàng)新互聯(lián)
URL地址：http://www.weahome.cn/article/esocp.html