WeChat 애플릿 구성 요소 진행 상황의 진행 표시줄 해석 및 분석-미니 프로그램 개발-php.cn

WeChat 애플릿 구성 요소 진행 상황의 진행 표시줄 해석 및 분석

高洛峰

풀어 주다： 2018-05-15 11:01:15

원래의

9782명이 탐색했습니다.

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

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

진행률 진행 표시줄구성요소샘플 코드는 다음과 같이 실행됩니다.

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;
}

로그인 후 복사

WeChat 애플릿 구성 요소 진행 상황의 진행 표시줄 해석 및 분석

다음은 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;
}

로그인 후 복사

WeChat 애플릿 구성 요소 진행 상황의 진행 표시줄 해석 및 분석

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;
}

로그인 후 복사

진행률 진행률 표시줄 주요 속성:

테이블>

속성

属性	类型	默认值	描述
percent	float	0	表示0-100百分比
show-info	Boolean	false	表示在进度条右侧显示百分比，写上属性即为true
color	Color	#09BB07	表示进度条颜色，可以是#或者已定义颜色属性
stroke-width	Number	6	单位：px，表示进度条显示的线条宽度
active	Boolean	false	表示进度条从左往右的动画，动画到设置的百分比停止，写上属性即为true