Progress

进度条

Progress，进度条，用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。在mpvue框架中实现这个功能是基于小程序的原生progress 组件，这里主要说一下它percent属性：

percent

  • 类型：Float
  • 默认值：无
  • 可选值：0-100
  • 说明：百分比0~100

要实现上传或者下载过程中显示进度的效果，就需要实时修改 percent属性的值，下面示例代码是每隔 20ms 将percent的值加1：

  1. <template>
  2.   <div class="page">
  3.     <div class="weui-progress">
  4.       <div class="weui-progress__bar">
  5.         <progress percent="0" stroke-width="3" />
  6.       </div>
  7.       <div class="weui-progress__opr">
  8.         <icon type="cancel" size="22"></icon>
  9.       </div>
  10.     </div>
  11.     <div class="weui-progress">
  12.       <div class="weui-progress__bar">
  13.         <progress percent="80" stroke-width="3" />
  14.       </div>
  15.       <div class="weui-progress__opr">
  16.         <icon type="cancel" size="22"></icon>
  17.       </div>
  18.     </div>
  19.     <div class="weui-progress">
  20.       <div class="weui-progress__bar">
  21.         <progress :percent="progress" stroke-width="3" show-info="true"/>
  22.       </div>
  23.     </div>
  24.     <div class="weui-btn-area">
  25.       <button type="primary" @click="upload" :disabled="disabled">上传</button>
  26.     </div>
  27.   </div>
  28. </template>
  30. <script>
  31. import base64 from '../../../static/images/base64';
  32. export default {
  33.   data() {
  34.     return {
  35.       progress: 0,
  36.       disabled: false
  37.     }
  38.   },
  39.   mounted() {
  41.   },
  42.   methods: {
  43.     upload() {
  44.       if (this.disabled) return;
  45.       this.progress = 0;
  46.       this.disabled = true;
  47.       this._next.call(this);
  48.     },
  50.     _next() {
  51.       var _this = this;
  52.       if (_this.progress >= 100) {
  53.         _this.disabled = false;
  54.         return true;
  55.       }
  56.       _this.progress++
  57.       setTimeout(function () {
  58.         _this._next.call(_this);
  59.       }, 20);
  60.     }
  61.   }
  63. }
  64. </script>
  66. <style>
  67. page {
  68.   margin-top: 50px;
  69.   padding: 15px;
  70.   box-sizing: border-box;
  71. }
  72. .weui-progress {
  73.   margin-bottom: 25px;
  74. }
  75. </style>

从上面代码可以看出：点击上传按钮后，如果按钮还是可点击状态，就终止，否则执行_next函数，在_next函数中，如果percent的值大于100，就 return,否则每隔 20ms percent自增 1。在实际开发中，可根据实时返回的数据对 progress组件的value属性值进行实时渲染。

效果

progress01