Comment utiliser le composant de progression dans le mini-programme WeChat

Cet article présente principalement en détail l'utilisation du composant de progression du mini programme WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Cet article partage le composant de progression du mini programme WeChat. pour tout le monde. Comment utiliser le composant est pour votre référence. Le contenu spécifique est le suivant

Rendu

WXML

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

attribut de progression

percent : pourcentage d'initialisation

show-info : s'il faut afficher le pourcentage de la barre de progression sur le côté droit de la progression bar
Stroke-width : largeur de la barre de progression, unité px, la valeur par défaut est 6
color : couleur de la barre de progression
activeColor : couleur de la barre de progression sélectionnée
backgroundColor : couleur de la barre de progression non sélectionnée
actif : barre de progression de gauche à gauche L'animation à droite
active-mode : vers l'arrière : l'animation est jouée depuis le début ; vers l'avant : l'animation est jouée à partir du dernier point final

Ce qui précède est ce que j'ai compilé pour tout le monde. J’espère qu’il sera utile à tout le monde à l’avenir.

Articles connexes :

Quelles sont les différences entre les variables définies let et var dans js ?

Exploration du rendu côté serveur Nuxt.js Vue

Résumé personnel VUE (problèmes rencontrés)

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!