Comment utiliser le composant de progression dans le mini-programme WeChat-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-08 16:41:08

original

1854 Les gens l'ont consulté

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

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

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>

Copier après la connexion

<🎜. >JS

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

Copier après la connexion

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.