微信小程序day02_12之基础组件进度条

缺乏、安全感 2022-03-10 09:44 481阅读 0赞

### 文章目录 ###

*   *   *  一. 进度条组件的介绍
         *  二. 代码示例
         *   *  1. 进度条的属性的演示
             *  2. 事件触发的进度条

day02的所有代码  
[https://gitee.com/jaythc/wxxcx\_learen/tree/master/day02][https_gitee.com_jaythc_wxxcx_learen_tree_master_day02]

### 一. 进度条组件的介绍 ###

progress 组件为进度条  
有如下的这些属性  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]

### 二. 代码示例 ###

#### 1. 进度条的属性的演示 ####

一个简单的进度条如下, 显示的效果如下图,

![20190310165736874.png][]

#### 2. 事件触发的进度条 ####

<progress percent=" { {mypercent}} " show-info='true' stroke-width='20' activeColor='pink' backgroundColor='yellow' active='true' active-mode="forwards" >
    </progress>
    <view bindtap='addPercent'>addPercent </view>

js如下

// pages/progress/progress.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
          mypercent : 15
      } ,
      addPercent: function(){ 
        var newPercent = this.data.mypercent+10;
        this.setData({ 
          mypercent: newPercent
        })
      }
    })

在页面中点击 addPercent, 会把进度条进行增加10 , 并且是从动画从上次结束点接着播. 用的是active-mode属性的forwards值  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
官方文档  
[https://developers.weixin.qq.com/miniprogram/dev/component/progress.html][https_developers.weixin.qq.com_miniprogram_dev_component_progress.html]

[https_gitee.com_jaythc_wxxcx_learen_tree_master_day02]: https://gitee.com/jaythc/wxxcx_learen/tree/master/day02
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/8c72debc0ef443d5be30f92b2c1e4b0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/800bcccc54514ca1811b541f32be44d8.png
[20190310165736874.png]: /images/20220310/fa8e4ae953fa4860826ef2063ccd3943.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220310/88a4e088f981479fae5853e59c2fb987.png
[https_developers.weixin.qq.com_miniprogram_dev_component_progress.html]: https://developers.weixin.qq.com/miniprogram/dev/component/progress.html