本文為大家分享了微信小程序progress組件的使用方法，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)公司網(wǎng)絡(luò)公司擁有十年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗，超過千家客戶的共同信賴。提供做網(wǎng)站、成都做網(wǎng)站、網(wǎng)站開發(fā)、網(wǎng)站定制、賣友情鏈接、建網(wǎng)站、網(wǎng)站搭建、成都響應(yīng)式網(wǎng)站建設(shè)公司、網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

效果圖

WXML

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

JS

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

progress屬性

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

DEMO下載

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。