#yyds幹貨盤點#【愚公系列】2022年11月微信小程式-progress進度條詳解

前言

進度條展示操作的目前進度，進度條使用場景：

在操作需要較長時間才能完成時，為使用者顯示該操作的目前進度和狀态。
當一個操作會打斷目前界面，或者需要在背景運作，且耗時可能超過 2 秒時；
當需要顯示一個操作完成的百分比時。

小程式進度條屬性介紹：

屬性	類型	預設值	必填	說明	最低版本
percent	number	否	百分比0~100	1.0.0
show-info	boolean	false	否	在進度條右側顯示百分比	1.0.0
border-radius	number/string	否	圓角大小	2.3.1
font-size	number/string	16	否	右側百分比字型大小	2.3.1
stroke-width	number/string	6	否	進度條線的寬度	1.0.0
color	string	#09BB07	否	進度條顔色（請使用activeColor）	1.0.0
activeColor	string	#09BB07	否	已選擇的進度條的顔色	1.0.0
backgroundColor	string	#EBEBEB	否	未選擇的進度條的顔色	1.0.0
active	boolean	false	否	進度條從左往右的動畫	1.0.0
active-mode	string	backwards	否	backwards: 動畫從頭播；forwards：動畫從上次結束點接着播	1.7.0
duration	number	30	否	進度增加1%所需毫秒數	2.8.2
bindactiveend	eventhandle	否	動畫完成事件	2.4.1

一、progress進度條詳解

1.普通進度條

<view class="progress-box">
  <progress percent="20" show-info stroke-width="3"/>
</view>

<view class="progress-box">
  <progress percent="40" active stroke-width="3" />
  <icon class="progress-cancel" type="cancel"></icon>
</view>

<view class="progress-box">
  <progress percent="60" active stroke-width="3" />
</view>

<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>

#yyds幹貨盤點#【愚公系列】2022年11月微信小程式-progress進度條詳解

2.異步進度條

<view class="gap">代碼示例,單擊模拟網絡異步</view>
<progress show-info bindtap="onTapProgressBar" stroke-width="2" percent="{{percentValue}}" backgroundColor="#f2f2f2" active-mode="forwards" active bindactiveend="onProgressActiveEnd"/>

onTapProgressBar(e){
  console.log(e)
  let progress = this.data.percentValue
  if (progress < 100){
    progress += 5
    this.setData({percentValue:Math.min(100, progress)})
  }
},

3.圓角進度條

<view class="gap">progress已産生的進度條如何設定圓角？</view>
<progress border-radius="5" percent="20" show-info />

4.進度條的重新加載

<view class="gap">已經加載完的進度條progress，怎麼點選某個按鈕讓它重新加載呢？</view>
<progress bindtap="onTapProgressBar" stroke-width="2" percent="{{percentValue}}" active-mode="forwards" active show-info="{{false}}" bindactiveend="onProgressActiveEnd"/>
<button bindtap="onTapReloadBtn">重新加載</button>

onTapReloadBtn(e){
  this.setData({percentValue:0})
  this.setData({percentValue:50})
},

5.環形進度條

5.1 自定義元件的封裝

1、元件的封裝

<view class='canvasBox'>
<!-- 外部灰色的圓  -->
  <view class='bigCircle'></view>
  <!-- 内部白色的圓 -->
  <view class='littleCircle'></view>
  <canvas type="2d" id="runCanvas" class='canvas'></canvas>
</view>

.canvasBox{
  height: 500rpx;
  position: relative;
  background-color: white;
}
/* 外部灰色的圓 */
.bigCircle{
  width: 420rpx;
  height: 420rpx;
  border-radius: 50%;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  background-color: #f2f2f2;
}
/* 内部白色的圓 */
.littleCircle{
  width: 350rpx;
  height: 350rpx;
  border-radius: 50%;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  background-color: white;
}
.canvas{
  width: 420rpx;
  height: 420rpx;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto auto;
  z-index: 99;
}

Component({
  runTimerid:0,
  behaviors: [],
  properties: {
    percent: {
      type: Number,
      value: 0,
      observer: function (newVal, oldVal) {
        this.draw(newVal);
      }
    },
  },
  data: {
    percentage: '', //百分比
    animTime: '', // 動畫執行時間
  }, // 私有資料，可用于模版渲染

  lifetimes: {
    // 生命周期函數，可以為函數，或一個在methods段中定義的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函數，可以為函數，或一個在methods段中定義的方法名
  attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆寫

  pageLifetimes: {
    // 元件所在頁面的生命周期函數
    show: function () { },
  },
  created() { },

  ready() {
    if (this.data.percent) this.draw(this.data.percent);
  },

  methods: {
    // 繪制圓形進度條方法
    run(c, w, h) {
      let that = this;
      var num = (2 * Math.PI / 100 * c) - 0.5 * Math.PI;
      that.ctx2.arc(w, h, w - 8, -0.5 * Math.PI, num)
      that.ctx2.setStrokeStyle("#09bb07");//綠色
      that.ctx2.setLineWidth("16");
      that.ctx2.setLineCap("butt");
      that.ctx2.stroke();

      that.ctx2.beginPath();
      that.ctx2.setFontSize(40); //注意不要加引号
      that.ctx2.setFillStyle("#b2b2b2");//淺灰色字型
      that.ctx2.setTextAlign("center");
      that.ctx2.setTextBaseline("middle");
      that.ctx2.fillText(c + "%", w, h);
      that.ctx2.draw();
    },
    // 動畫效果實作
    canvasTap(start, end, time, w, h) {
      let that = this;
      start++;
      if (start > end) {
        return false;
      }
      that.run(start, w, h);
      
      that.runTimerid = setTimeout(function () {
        that.canvasTap(start, end, time, w, h);
      }, time);
    },

    draw(percent) {
      const id = 'runCanvas'
      const animTime = 500
      if (percent > 100) return
      if (!this.ctx2) {
        const ctx2 = wx.createCanvasContext(id, this)
        this.ctx2 = ctx2
      }

      let oldPercentValue = this.data.percentage
      this.setData({
        percentage: percent,
        animTime: animTime
      });
      var time = this.data.animTime / (this.data.percentage-oldPercentValue);

      const query = wx.createSelectorQuery().in(this)
      query.select('#' + id).boundingClientRect((res) => {
        var w = parseInt(res.width / 2);
        var h = parseInt(res.height / 2);
        if (this.runTimerid) clearTimeout(this.runTimerid)
        this.canvasTap(oldPercentValue, percent, time, w, h)
      }).exec()
    }
  }
})

2、元件的使用

{
  "usingComponents": {
    "circle-progress": "../circle-progress/index"
  }
}

<view class="gap">環形進度條</view>
<circle-progress id="progress1" percent="{{percentValue}}" />
<button bindtap="drawProgress">redraw</button>

drawProgress(){
  if (this.data.percentValue >= 100){
    this.setData({
      percentValue:0
    })
  }
  this.setData({
    percentValue:this.data.percentValue+10
  })
}

5.2 第三方環形進度條元件

1、使用第三方元件，在項目根目錄下執行指令：

npm install mp-progress --save

在需要使用的頁面中配置新增mp-progress的元件定義：

"usingComponents": {
  "mpProgress": "mp-progress/dist/component/mp-progress"
}

在頁面data中定義對應的資料，config參數的使用方法和之前api調用的時候完全相同，canvasSize預設是{ width: 400, height: 400 }，這種方式不同的是不需要傳參數target: this，同時新增percentage（進度條的百分比）：

Page({
  data: {
    config: {
      canvasSize: {
        width: 400,
        height: 400
      },
      percent: 100,
      barStyle: [{width: 20, fillStyle: '#f0f0f0'}, {width: 20, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
      needDot: true,
      dotStyle: [{r: 20, fillStyle: '#ffffff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]
    },
    percentage: 0
  }
});

頁面使用

<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>

import MpProgress from 'mp-progress';
// 初始化
// 注意：在wepy中必須在onReady裡調用
const mprogress = new MpProgress({
  target: this,
  canvasId: 'progress',
  canvasSize: {width: 400, height: 400},
  barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
});

// 開始繪制進度，60代表60%
mprogress.draw(60);

<canvas class="canvas" type="2d" id="progress"></canvas>

#yyds幹貨盤點#【愚公系列】2022年11月微信小程式-progress進度條詳解

前言

一、progress進度條詳解

1.普通進度條

2.異步進度條

3.圓角進度條

4.進度條的重新加載

5.環形進度條

5.1 自定義元件的封裝

5.2 第三方環形進度條元件

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

#yyds幹貨盤點#【愚公系列】2022年11月 微信小程式-progress進度條詳解

前言

一、progress進度條詳解

1.普通進度條

2.異步進度條

3.圓角進度條

4.進度條的重新加載

5.環形進度條

5.1 自定義元件的封裝

5.2 第三方環形進度條元件

繼續閱讀

#yyds幹貨盤點#【愚公系列】2022年11月微信小程式-progress進度條詳解