진행률 진행 표시줄구성요소 설명:
진행 표시줄은 현재 작업이 얼마나 완료되었는지 표시하여 사용자가 작업의 실행을 시각적으로 인지할 수 있도록 합니다.
진행률 표시줄은 HTML5 진행률 표시줄 진행률과 유사한 WeChat 애플릿의 구성 요소입니다.
다음은 WXML 코드입니다.
[XML] 일반 텍스트 보기 코드 복사
1 2 3 4 5 | < view class = "content" >
< text class = "con-text" >问:老司机,啥时候开车?</ text >
< progress class = "con-pro" percent = "97" show-info/>
</ view >
|
로그인 후 복사
JS 코드는 다음과 같습니다.
[JavaScript] 일반 텍스트 보기 코드 복사
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Page({
data:{
},
onLoad: function (options){
},
onReady: function (){
},
onShow: function (){
},
onHide: function (){
},
onUnload: function (){
}
})
|
로그인 후 복사
로그인 후 복사
로그인 후 복사
WXSS 코드는 다음과 같습니다.
[CSS] 일반 텍스트 보기 코드 복사
1 2 3 4 5 6 7 8 9 10 | .content{
padding-top : 20px ;
}
.con-text{
display : block ;
padding-bottom : 20px ;
}
.con-pro{
color : cornflowerblue;
}
|
로그인 후 복사
다음은 WXML 코드입니다:
[XML] 일반 텍스트 보기 코드 복사
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < 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] 일반 텍스트 보기 코드 복사
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Page({
data:{
},
onLoad: function (options){
},
onReady: function (){
},
onShow: function (){
},
onHide: function (){
},
onUnload: function (){
}
})
|
로그인 후 복사
로그인 후 복사
로그인 후 복사
다음은 WXSS 코드입니다.
[CSS] 일반 텍스트 보기 코드 복사
1 2 3 4 5 6 7 8 9 10 11 | .content{
padding-top : 20px ;
}
.con-text{
display : block ;
padding-bottom : 10px ;
}
.con-pro{
padding-bottom : 30px ;
color : cornflowerblue;
}
|
로그인 후 복사
로그인 후 복사
다음은 WXML 코드입니다.
[XML] 일반 텍스트 보기 코드 복사
1 2 3 4 5 | < 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] 일반 텍스트 보기 코드 복사
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Page({
data:{
},
onLoad: function (options){
},
onReady: function (){
},
onShow: function (){
},
onHide: function (){
},
onUnload: function (){
}
})
|
로그인 후 복사
로그인 후 복사
로그인 후 복사
여기 WXSS 코드:
[CSS] 일반 텍스트 보기 코드 복사
1 2 3 4 5 6 7 8 9 10 11 | .content{
padding-top : 20px ;
}
.con-text{
display : block ;
padding-bottom : 10px ;
}
.con-pro{
padding-bottom : 30px ;
color : cornflowerblue;
}
|
로그인 후 복사
로그인 후 복사
진행 진행률 표시줄주요 속성:
일 수 있습니다.
속성 |
유형 |
기본값 |
설명 |
퍼센트 |
float |
0 |
은 0~100퍼센트를 나타냅니다 |
show-info |
Boolean |
false |
는 진행률 표시줄 오른쪽에 백분율을 표시한다는 뜻입니다. 속성을 true로 작성합니다 |
color |
Color |
#09BB07 |
는 진행률 표시줄의 색상을 나타내며 # 또는 정의된 색상 속성 |
획 너비 |
숫자 |
6 |
단위: px, 진행률 표시줄에 표시되는 선 너비 |
active |
Boolean |
false |
는 왼쪽에서 오른쪽으로 진행률 표시줄의 애니메이션을 나타냅니다. 속성을 쓰면 애니메이션이 멈춥니다. , 사실입니다 |
위 내용은 WeChat 애플릿 구성요소 해석 및 분석: 6. 진행률 표시줄의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!