Interpretation und Analyse des Fortschrittsbalkens des WeChat-Applet-Komponentenfortschritts

FortschrittFortschrittsbalkenKomponentenbeschreibung:

Der Fortschrittsbalken zeigt an, wie weit die Dinge aktuell abgeschlossen sind, sodass Benutzer die Ausführung der Dinge visuell wahrnehmen können. Der
Fortschrittsbalken ist eine Komponente des WeChat-Applets, ähnlich dem HTML5 Fortschrittsbalken.

FortschrittsbalkenKomponenteDer Beispielcode läuft wie folgt:

Das Folgende ist WXML Code:

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

Das Folgende ist JSCode:

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

Das Folgende ist WXSS Code:

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

Unten finden Sie den WXML-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>

Unten ist der JS-Code:

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

Das Folgende ist der WXSS-Code:

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

Das Folgende ist der WXML-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>

Das Folgende ist der JS-Code:

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

Das Folgende ist der WXSS-Code:

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

Fortschrittsbalken main Attribute:

Prozent6

Attribute

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

Type

Standardwert

Beschreibung

float

0

Zeigt 0-100 Prozent an

show-info

Boolean

false

bedeutet, dass der Prozentsatz auf der rechten Seite des Fortschrittsbalkens angezeigt wird, das Schreiben des Attributs bedeutet true td>

Farbe

Farbe

#09BB07

Stellt die Farbe des Fortschrittsbalkens dar, die # oder sein kann ein definiertes Farbattribut

Stroke-Width

Number

Einheit: px, gibt die vom Fortschrittsbalken angezeigte Zeile an. Breite

aktiv

Boolescher Wert

false

Zeigt die Animation des Fortschrittsbalkens von links nach rechts an. Die Animation stoppt beim festgelegten Prozentsatz wird wahr sein

Das obige ist der detaillierte Inhalt vonInterpretation und Analyse des Fortschrittsbalkens des WeChat-Applet-Komponentenfortschritts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!