Heim >WeChat-Applet >Mini-Programmentwicklung >Interpretation und Analyse der WeChat-Applet-Komponenten: 6. Fortschrittsbalken

Interpretation und Analyse der WeChat-Applet-Komponenten: 6. Fortschrittsbalken

巴扎黑
巴扎黑Original
2017-03-19 18:34:512348Durchsuche

FortschrittsbalkenKomponentenbeschreibung:

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-Fortschritt.

Das Folgende ist der WXML-Code:

[XML] Einfache Textansicht Code kopieren

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

Das Folgende ist der JS-Code:

[JavaScript] Nur-Text-Ansicht Code kopieren

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

Das Folgende ist der WXSS-Code:

[CSS] Nur-Text-Ansicht Code kopieren

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

Das Folgende ist der WXML-Code:

[XML] Nur-Text-Ansicht Code kopieren

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


Das Folgende ist der JS-Code:

[JavaScript] Nur-Text-Ansicht Code kopieren

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

Das Folgende ist der WXSS-Code:

[CSS] Nur-Text-Ansicht Code kopieren

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

Das Folgende ist der WXML-Code:

[XML] Nur-Text-Ansicht Kopieren 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:

[JavaScript] Nur-Text-Ansicht Code kopieren

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

Das Folgende ist WXSS-Code:

[CSS] Einfache Textansicht Code kopieren

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


Hauptattribute des Fortschrittsbalkens :

sein kann

Attribut

Typ

Standardwert

Beschreibung

Prozent Float 0 steht für 0-100 Prozent
show-info Boolean false bedeutet, dass der Prozentsatz auf der rechten Seite des Fortschrittsbalkens angezeigt wird. Schreiben Sie das Attribut als wahr
Farbe Farbe #09BB07 stellt die Farbe des Fortschrittsbalkens dar, die # oder das definierte Farbattribut
Strichbreite Zahl 6 Einheit: px, gibt die vom Fortschrittsbalken angezeigte Linienbreite an
aktiv Boolean false stellt die Animation des Fortschrittsbalkens von links nach rechts dar. Wenn Sie das Attribut schreiben, stoppt die Animation , es bedeutet wahr



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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn