progress進度列元件說明:
元件說明:
進度條,就是表示事情目前完成到什麼地步了,可以讓使用者視覺上感知事情的執行。
progress進度條是微信小程式的元件,和HTML5的進度條progress類似。
以下是WXML程式碼:
[XML] 純文字檢視 複製程式碼
<!--index.wxml--> <view class="content"> <text class="con-text">问:老司机,啥时候开车?</text> <progress class="con-pro" percent="97" show-info/> </view>
下面是JS程式碼:
#[JavaScript] 純文字檢視 複製程式碼
Page({ data:{ }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } })
以下是WXSS程式碼:
[CSS] 純文字檢視 複製程式碼
.content{ padding-top: 20px; } .con-text{ display: block; padding-bottom: 20px; } .con-pro{ color: cornflowerblue; }
#下面是WXML程式碼:
[XML] 純文字檢視
複製程式碼
<!--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程式碼:
[JavaScript] 純文字檢視
複製程式碼##
Page({ data:{ }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } })下面是WXSS程式碼:[CSS]
純文字檢視 複製程式碼
.content{ padding-top: 20px; } .con-text{ display: block; padding-bottom: 10px; } .con-pro{ padding-bottom: 30px; color: cornflowerblue; }以下是WXML程式碼:[XML]
純文字檢視 複製程式碼
#
<!--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程式碼:[JavaScript]
純文字檢視
複製程式碼Page({
data:{
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
下面是WXSS程式碼:[CSS] 純文字檢視
#progress進度條的 | ################################### #主要屬性:############################屬性###########類型###### #######預設值############描述### | ||
percent | float | 0 | 表示0-100百分比 |
# show-info | Boolean | false | 表示在進度條右側顯示百分比,寫上屬性即為true |
color | Color | #09BB07 | 表示進度條顏色,可以是#或已定義顏色屬性 |
stroke-width
Number
以上是解讀與分析微信小程式元件:六、progress進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章!