Maison  >  Article  >  Applet WeChat  >  Interprétation et analyse de la barre de progression de la progression du composant de l'applet WeChat

Interprétation et analyse de la barre de progression de la progression du composant de l'applet WeChat

高洛峰
高洛峰original
2018-05-15 11:01:159750parcourir

progressionBarre de progressionDescription du composant :

La barre de progression indique dans quelle mesure la chose est actuellement terminée, permettant à l'utilisateur de percevoir visuellement l'exécution de la chose. La
barre de progression est un composant de l'applet WeChat, similaire à la barre de progression de HTML5.

barre de progression de progressionComposantL'exemple de code s'exécute comme suit :

Interprétation et analyse de la barre de progression de la progression du composant de lapplet WeChat

Ce qui suit est WXML Code :

<!--index.wxml-->
<view class="content">
    <text class="con-text">问:老司机,啥时候开车?</text>
    <progress class="con-pro" percent="97" show-info/>
</view>

Ce qui suit est JSCode :

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

Ce qui suit est WXSS Code :

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 20px;
}
.con-pro{
  color: cornflowerblue;
}

Interprétation et analyse de la barre de progression de la progression du composant de lapplet WeChat

Ci-dessous le code 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>

Ci-dessous le code JS :

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

Ce qui suit est le code WXSS :

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-pro{
  padding-bottom: 30px;
  color: cornflowerblue;
}

Interprétation et analyse de la barre de progression de la progression du composant de lapplet WeChat

Ce qui suit est le code 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>

Ce qui suit est le code JS :

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

Ce qui suit est le code WXSS :

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-pro{
  padding-bottom: 30px;
  color: cornflowerblue;
}

Barre de progression principale attributs :

pourcentage6

Attribut

属性

类型

默认值

描述

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

Type

Valeur par défaut

Description

float 0 Indique un pourcentage de 0 à 100
show-info Booléen false signifie afficher le pourcentage sur le côté droit de la barre de progression, écrire l'attribut signifie vrai td>
color Color #09BB07 Représente la couleur de la barre de progression, qui peut être # ou un attribut de couleur défini
largeur de trait NombreUnité : px, indiquant la ligne affichée par la barre de progression Largeur
active Booléen false Indique l'animation de la barre de progression de gauche à droite. L'animation s'arrête au pourcentage défini. sera vrai

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn