> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 애플릿 구성요소 해석 및 분석: 6. 진행률 표시줄

WeChat 애플릿 구성요소 해석 및 분석: 6. 진행률 표시줄

巴扎黑
풀어 주다: 2017-03-19 18:34:51
원래의
2342명이 탐색했습니다.

진행률 진행 표시줄구성요소 설명:

진행 표시줄은 현재 작업이 얼마나 완료되었는지 표시하여 사용자가 작업의 실행을 시각적으로 인지할 수 있도록 합니다.
진행률 표시줄은 HTML5 진행률 표시줄 진행률과 유사한 WeChat 애플릿의 구성 요소입니다.

다음은 WXML 코드입니다.

[XML] 일반 텍스트 보기 코드 복사

1

2

3

4

5

<!--index.wxml-->

<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){

    // 页面初始化 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

<!--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] 일반 텍스트 보기 코드 복사

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Page({

  data:{

  },

  onLoad:function(options){

    // 页面初始化 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

<!--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] 일반 텍스트 보기 코드 복사

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Page({

  data:{

  },

  onLoad:function(options){

    // 页面初始化 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿