uniapp 电商app进度条组件的使用（砍价进度条处理）

傷城~ 2021-07-25 12:06 1387阅读 0赞

最近公司的电商app需要做一个砍价的功能，具体UI如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
下面是我开发的版本，样式基本保持一致。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
可以看出，砍价最主要的部分就是砍价进度条的部分。

为了能够实现进度条的功能，我从uniapp插件市场查找到一款进度条的组件，详细介绍一下。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]  
[uniapp插件市场 cmd-progress进度条组件 https://ext.dcloud.net.cn/plugin?id=259][uniapp_ cmd-progress_ https_ext.dcloud.net.cn_plugin_id_259]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]  
从组件介绍来看，基本可以满足我的需求。

下面介绍组件的具体使用方法：

### cmd-progress组件的引入 ###

import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
    export default { 
        components: { cmdProgress}
    }

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>line</td> 
   <td>进度类型 - 线型：line、圆圈形：circle、仪表盘：dashboard</td> 
  </tr> 
  <tr> 
   <td>percent</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>进度百分比值 - 显示范围0-100 ，可能数比较大就需要自己转成百分比的值</td> 
  </tr> 
  <tr> 
   <td>success-percent</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>进度已完成的百分几 - 仅支持进度线型：line</td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td>String</td> 
   <td>normal</td> 
   <td>进度状态 - 涌动：active（仅支持线型：line）、正常：normal、完成：success、失败：exception</td> 
  </tr> 
  <tr> 
   <td>show-info</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>进度状态信息 - 是否显示进度数值或状态图标</td> 
  </tr> 
  <tr> 
   <td>stroke-width</td> 
   <td>Number</td> 
   <td>6</td> 
   <td>进度线条的宽度 - 建议在条线的宽度范围：1-50，与进度条显示宽度有关</td> 
  </tr> 
  <tr> 
   <td>stroke-color</td> 
   <td>String</td> 
   <td>-</td> 
   <td>进度线条的颜色 - 渐变色仅支持线型：line</td> 
  </tr> 
  <tr> 
   <td>stroke-shape</td> 
   <td>String</td> 
   <td>round</td> 
   <td>进度线条两端的形状 - 圆：round、方块直角：square</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>Number</td> 
   <td>80</td> 
   <td>进度画布宽度 - 仅支持圆圈形：circle、仪表盘：dashboard</td> 
  </tr> 
  <tr> 
   <td>gap-degree</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>进度圆形缺口角度 - 可取值 0 ~ 360,仅支持圆圈形：circle、仪表盘：dashboard</td> 
  </tr> 
  <tr> 
   <td>gap-position</td> 
   <td>String</td> 
   <td>top</td> 
   <td>进度圆形缺口位置 - 可取值’top’, ‘bottom’, ‘left’, ‘right’,仅支持圆圈形：circle、仪表盘：dashboard</td> 
  </tr> 
 </tbody> 
</table>

<cmd-progress class="progress" :percent="100" 
    :strokeWidth="13" isAnimate="true" 
    stroke-color="#FF4B4B"></cmd-progress>

![在这里插入图片描述][20201021154052699.png_pic_center]

<cmd-progress class="progress" :percent="80" 
    :strokeWidth="13" isAnimate="true" 
    stroke-color="#FF4B4B"></cmd-progress>

![在这里插入图片描述][20201021154156919.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/7e63f18edfbc407eb667de9f0e886291.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/b802219474024010af906c2c7e5b3ab3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/b1a2d5c0b28647de864be069d48c3077.png
[uniapp_ cmd-progress_ https_ext.dcloud.net.cn_plugin_id_259]: https://ext.dcloud.net.cn/plugin?id=259
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/24fb774bcc5d464e867cbd168d953c45.png
[20201021154052699.png_pic_center]: /images/20210725/c6f983d758474be697f91f632bc5d1c9.png
[20201021154156919.png_pic_center]: /images/20210725/1e1756d8be1f4d7489a329ee6049cad2.png