Interprétation et analyse des composants de l'applet WeChat : 6. barre de progression

barre de progression de progressionDescription du composant :

La barre de progression indique dans quelle mesure les choses sont actuellement terminées, permettant aux utilisateurs de percevoir visuellement l'exécution des choses.
La barre de progression est un composant de l'applet WeChat, similaire à la barre de progression HTML5.

Ce qui suit est le code WXML :

[XML] Vue en texte brut Copier le code

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

Ce qui suit est le code JS :

[JavaScript] Vue en texte brut Copier le code

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

Ce qui suit est le code WXSS :

[CSS] Vue en texte brut Copier le code

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

Ce qui suit est le code WXML :

[XML] Affichage en texte brut Copier le code

<!--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>

Ce qui suit est le code JS :

[JavaScript] Vue en texte brut Copier le code

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

Ce qui suit est le code WXSS :

[CSS] Vue en texte brut Copier le code

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

Ce qui suit est le code WXML :

[XML] Vue en texte brut Copier code

<!--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 :

[JavaScript] Vue en texte brut Copier le code

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

Ce qui suit est le code WXSS :

[CSS] Affichage en texte brut Copier le code

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

Principaux attributs de la barre de progression  :

<.>colorColor#09BB07 représente la couleur de la barre de progression, qui peut être # ou l'attribut de couleur défini largeur de trait Nombre6Unité : px, indiquant la largeur de trait affichée par la barre de progression active Booleanfalse représente l'animation de la barre de progression de gauche à droite L'animation s'arrête au pourcentage défini si vous écrivez l'attribut. , ça veut dire vrai

attribut	Type	Valeur par défaut	Description
pourcentage	float	0	représente 0-100 pourcentage
show-info	Boolean	false	signifie afficher le pourcentage sur le côté droit de la barre de progression Écrivez l'attribut pour qu'il soit 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!