您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序組件progress進(jìn)度條怎么弄,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
progress進(jìn)度條組件說明:
進(jìn)度條,就是表示事情當(dāng)前完成到什么地步了,可以讓用戶視覺上感知事情的執(zhí)行。
progress進(jìn)度條是微信小程序的組件,和HTML5的進(jìn)度條progress類似。
progress進(jìn)度條組件示例代碼運(yùn)行效果如下:
下面是WXML代碼:
<!--index.wxml--> <view class="content"> <text class="con-text">問:老司機(jī),啥時候開車?</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(){ // 頁面關(guān)閉 } })
下面是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">改變進(jìn)度條線的寬度:15px</text> <progress class="con-pro" percent="47" stroke-width="15"/> <text class="con-text">改變進(jìn)度條顏色(#):黑色</text> <progress class="con-pro" percent="67" color="#000000"/> <text class="con-text">改變進(jìn)度條顏色(已定義):橘色</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(){ // 頁面關(guān)閉 } })
下面是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(){ // 頁面關(guān)閉 } })
下面是WXSS代碼:
.content{ padding-top: 20px; } .con-text{ display: block; padding-bottom: 10px; } .con-pro{ padding-bottom: 30px; color: cornflowerblue; }
progress進(jìn)度條的主要屬性:
屬性 | 類型 | 默認(rèn)值 | 描述 |
percent | float | 0 | 表示0-100百分比 |
show-info | Boolean | false | 表示在進(jìn)度條右側(cè)顯示百分比,寫上屬性即為true |
color | Color | #09BB07 | 表示進(jìn)度條顏色,可以是#或者已定義顏色屬性 |
stroke-width | Number | 6 | 單位:px,表示進(jìn)度條顯示的線條寬度 |
active | Boolean | false | 表示進(jìn)度條從左往右的動畫,動畫到設(shè)置的百分比停止,寫上屬性即為true |
看完了這篇文章,相信你對“微信小程序組件progress進(jìn)度條怎么弄”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。