Heim > WeChat-Applet > Mini-Programmentwicklung > Interpretation und Analyse des Fortschrittsbalkens des WeChat-Applet-Komponentenfortschritts

Interpretation und Analyse des Fortschrittsbalkens des WeChat-Applet-Komponentenfortschritts

高洛峰
Freigeben: 2018-05-15 11:01:15
Original
9781 Leute haben es durchsucht

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:

Interpretation und Analyse des Fortschrittsbalkens des WeChat-Applet-Komponentenfortschritts

Das Folgende ist WXML Code:

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

Das Folgende ist JSCode:

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

Das Folgende ist WXSS Code:

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

Interpretation und Analyse des Fortschrittsbalkens des WeChat-Applet-Komponentenfortschritts

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>
Nach dem Login kopieren

Unten ist der JS-Code:

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

Das Folgende ist der WXSS-Code:

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

Interpretation und Analyse des Fortschrittsbalkens des WeChat-Applet-Komponentenfortschritts

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>
Nach dem Login kopieren

Das Folgende ist der JS-Code:

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

Das Folgende ist der WXSS-Code:

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

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage