How to use the progress component in WeChat mini program-JS Tutorial-php.cn

How to use the progress component in WeChat mini program

亚连

Release： 2018-06-08 16:41:08

Original

1903 people have browsed it

This article mainly introduces the use of the progress component of the WeChat applet in detail. It has certain reference value. Interested friends can refer to it.

This article shares the progress component of the WeChat applet for everyone. How to use the component is for your reference. The specific content is as follows

Rendering

How to use the progress component in WeChat mini program

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>

Copy after login

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

Copy after login

progress attribute

percent: initialization percentage
show-info: whether to display the progress bar percentage on the right side of the progress bar
stroke-width: progress bar width, unit px , the default is 6
color: color of the progress bar
activeColor: color of the selected progress bar
backgroundColor: color of the unselected progress bar
active: animation of the progress bar from left to right
active-mode: backwards: the animation will be played from the beginning; forwards: the animation will be played from the last ending point

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

What are the differences between let and var defining variables in js?

Nuxt.js Vue server-side rendering exploration

VUE personal summary (problems encountered)

The above is the detailed content of How to use the progress component in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!