Maison > Article > Applet WeChat > Interprétation et analyse de la barre de progression de la progression du composant de l'applet WeChat
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 :
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; }
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; }
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 :
Attribut
|
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 | Nombre | 6Unité : 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!