Progress

进度条

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

percent

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

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

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

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

效果

progress01