집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 애플릿 구성 요소 진행 상황의 진행 표시줄 해석 및 분석
진행률진행률 표시줄구성요소 설명:
진행 표시줄은 현재 작업이 얼마나 완료되었는지 표시하여 사용자가 작업의 실행을 시각적으로 인지할 수 있도록 합니다.
진행률 진행률 표시줄은 HTML5 진행률 표시줄 진행률과 유사한 WeChat 애플릿의 구성 요소입니다.
진행률 진행 표시줄구성요소샘플 코드는 다음과 같이 실행됩니다.
다음은 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为页面跳转所带来的参数 }, 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为页面跳转所带来的参数 }, 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为页面跳转所带来的参数 }, 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; }
진행률 진행률 표시줄 주요 속성:
속성
|
유형 |
기본값 | 설명 |
||||||||||||||||||||||||
퍼센트 | 플로트 | 0 | 0~100%를 나타냅니다 | ||||||||||||||||||||||||
show-info | 부울 | false | 는 진행률 표시줄 오른쪽에 백분율을 표시하고 속성을 true로 기록한다는 의미입니다. | ||||||||||||||||||||||||
color | 색상 | #09BB07 | 진행률 표시줄의 색상을 나타냅니다. # 또는 정의된 색상 속성일 수 있습니다. | ||||||||||||||||||||||||
획 너비 | 숫자 | 6 | 단위: px, 진행률 표시줄에 표시되는 선 너비를 나타냅니다. | ||||||||||||||||||||||||
활성 td> | 부울 | false | 진행률 표시줄의 애니메이션을 왼쪽에서 오른쪽으로 나타내며, 설정된 백분율에서 애니메이션이 멈춥니다. 속성을 true로 작성하세요 |
위 내용은 WeChat 애플릿 구성 요소 진행 상황의 진행 표시줄 해석 및 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!