Interprétation et analyse de la barre de progression de la progression du composant de l'applet WeChat-Développement de mini-programmes-php.cn

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

高洛峰

Libérer： 2018-05-15 11:01:15

original

9703 Les gens l'ont consulté

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>

Copier après la connexion

Ce qui suit est JSCode :

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

Copier après la connexion

Ce qui suit est WXSS Code :

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

Copier après la connexion

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>

Copier après la connexion

Ci-dessous le code JS :

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

Ce qui suit est le code JS :

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

Copier après la connexion

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

Copier après la connexion

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

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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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