小編給大家分享一下微信小程序組件progress進度條怎么弄，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

公司主營業(yè)務：成都網(wǎng)站建設、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出大祥免費做網(wǎng)站回饋大家。

progress進度條組件說明:

進度條，就是表示事情當前完成到什么地步了，可以讓用戶視覺上感知事情的執(zhí)行。
progress進度條是微信小程序的組件，和HTML5的進度條progress類似。

progress進度條組件示例代碼運行效果如下：

下面是WXML代碼：

<!--index.wxml-->
<view class="content">
    <text class="con-text">問：老司機，啥時候開車？</text>
    <progress class="con-pro" percent="97" show-info/>
</view>

下面是JS代碼：

Page({
  data:{
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

下面是WXSS代碼：

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 20px;
}
.con-pro{
  color: cornflowerblue;
}

下面是WXML代碼：

<!--index.wxml-->
<view class="content">
    <text class="con-text">不展示百分比</text>
    <progress class="con-pro" percent="77"/>
    <text class="con-text">展示百分比(百分比字體樣式通過class控制)</text>
    <progress class="con-pro" percent="97" show-info/>
    <text class="con-text">改變進度條線的寬度:15px</text>
    <progress class="con-pro" percent="47" stroke-width="15"/>
    <text class="con-text">改變進度條顏色(#)：黑色</text>
    <progress class="con-pro" percent="67" color="#000000"/>
    <text class="con-text">改變進度條顏色(已定義)：橘色</text>
    <progress class="con-pro" percent="67" color="orange"/>
    <text class="con-text">幾個屬性疊加</text>
    <progress class="con-pro" percent="87" color="lightgreen" show-info stroke-width="30"/>
</view>

下面是JS代碼：

Page({
  data:{
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

下面是WXSS代碼：

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-pro{
  padding-bottom: 30px;
  color: cornflowerblue;
}

下面是WXML代碼：

<!--index.wxml-->
<view class="content">
    <text class="con-text">看我開的飛起</text>
    <progress class="con-pro" active percent="87" color="lightgreen" show-info stroke-width="20"/>
</view>

下面是JS代碼：

Page({
  data:{
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

下面是WXSS代碼：

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-pro{
  padding-bottom: 30px;
  color: cornflowerblue;
}

progress進度條的主要屬性：

屬性	類型	默認值	描述
percent	float	0	表示0-100百分比
show-info	Boolean	false	表示在進度條右側(cè)顯示百分比，寫上屬性即為true
color	Color	#09BB07	表示進度條顏色，可以是#或者已定義顏色屬性
stroke-width	Number	6	單位：px，表示進度條顯示的線條寬度
active	Boolean	false	表示進度條從左往右的動畫，動畫到設置的百分比停止，寫上屬性即為true

看完了這篇文章，相信你對“微信小程序組件progress進度條怎么弄”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前標題：微信小程序組件progress進度條怎么弄-創(chuàng)新互聯(lián)
URL分享：http://chinadenli.net/article10/diiego.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、外貿(mào)建站、搜索引擎優(yōu)化、面包屑導航、虛擬主機、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)