Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie die Fortschrittskomponente im WeChat-Miniprogramm

So verwenden Sie die Fortschrittskomponente im WeChat-Miniprogramm

亚连
亚连Original
2018-06-08 16:41:081874Durchsuche

Dieser Artikel stellt hauptsächlich die Verwendung der Fortschrittskomponente des WeChat-Miniprogramms im Detail vor. Er hat einen gewissen Referenzwert.

Dieser Artikel teilt die Fortschrittskomponente des WeChat-Miniprogramms Für alle. Die Verwendung der Komponente dient als Referenz. Der spezifische Inhalt ist wie folgt:

So verwenden Sie die Fortschrittskomponente im WeChat-MiniprogrammWXML

<view class="tui-content">
 <view class="tui-menu-list">
  <text>show-info在进度条右侧显示百分比</text>
  <progress percent="50" show-info />
 </view>
 <view class="tui-menu-list">
  <text>stroke-width进度条线的宽度,单位px</text>
  <progress percent="50" stroke-width="12" show-info/>
 </view>
 <view class="tui-menu-list">
  <text>color进度条颜色</text>
  <progress percent="50" color="red" show-info/>
 </view>
 <view class="tui-menu-list">
  <text>active进度条从左往右的动画</text>
  <progress percent="50" active show-info/>
 </view>
 <view class="tui-menu-list">
  <text>backgroundColor未选择的进度条的颜色</text>
  <progress percent="50" backgroundColor="blue" active show-info/>
 </view>
 <view class="tui-menu-list">
  <text>动态设置进度条进度</text>
  <progress percent="{{index}}" show-info/>
 </view>
 <view class="tui-tabbar-content">
  <view class="tui-tabbar-group">
   <text data-id="10" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 10 ? &#39;tui-active&#39; : &#39;&#39;}}">10%</text>
   <text data-id="30" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 30 ? &#39;tui-active&#39; : &#39;&#39;}}">30%</text>
   <text data-id="50" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 50 ? &#39;tui-active&#39; : &#39;&#39;}}">50%</text>
   <text data-id="70" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 70 ? &#39;tui-active&#39; : &#39;&#39;}}">70%</text>
   <text data-id="90" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 90 ? &#39;tui-active&#39; : &#39;&#39;}}">90%</text>
  </view>
 </view>
</view>

JS

Page({
 data: {
  index: 10
 },
 changeTabbar(e){
  this.setData({ index: e.currentTarget.dataset.id})
 }
})

Fortschrittsattribut

Prozent: Initialisierungsprozentsatz

show-info: ob der Fortschrittsbalkenprozentsatz auf der rechten Seite des Fortschrittsbalkens angezeigt werden soll

Strichbreite: Breite des Fortschrittsbalkens, Einheit px, der Standardwert ist 6
Farbe: Farbe des Fortschrittsbalkens
aktiveFarbe: Farbe des ausgewählten Fortschrittsbalkens
Hintergrundfarbe: Farbe des nicht ausgewählten Fortschrittsbalkens
aktiv: Animation des Fortschrittsbalkens von links nach rechts
aktiver Modus: rückwärts: Die Animation wird vom Anfang an abgespielt; vorwärts: Die Animation wird ab dem letzten Endpunkt abgespielt

Das Obige habe ich hoffentlich für alle zusammengestellt Es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Was sind die Unterschiede zwischen let- und var-definierten Variablen in js?

Nuxt.js Vue serverseitige Rendering-Erkundung

VUE persönliche Zusammenfassung (aufgetretene Probleme)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Fortschrittskomponente im WeChat-Miniprogramm. 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