【移動應用開發(fā)技術】微信小程序如何實現(xiàn)圓形進度條

【移動應用開發(fā)技術】微信小程序如何實現(xiàn)圓形進度條

這篇文章給大家分享的是有關微信小程序如何實現(xiàn)圓形進度條的內(nèi)容。在下覺得挺實用的，因此分享給大家做個參考，一起跟隨在下過來看看吧。小程序中使用圓形倒計時，效果圖：思路使用2個canvas一個是背景圓環(huán)，一個是彩色圓環(huán)。使用setInterval讓彩色圓環(huán)逐步繪制。解決方案第一步先寫結構一個盒子包裹2個canvas以及文字盒子；盒子使用相對定位作為父級，flex布局，設置居中；一個canvas，使用絕對定位作為背景，canvas-id="canvasProgressbg"另一個canvas，使用相對定位作為進度條，canvas-id="canvasProgress"代碼如下：//

wxml

<view

class="container">

<view

class='progress_box'>

<canvas

class="progress_bg"

canvas-id="canvasProgressbg">

</canvas>

<canvas

class="progress_canvas"

canvas-id="canvasProgress">

</canvas>

<view

class="progress_text">

<view

class="progress_dot"></view>

<text

class='progress_info'>

{{progress_txt}}</text>

</view>

</view>

</view>//

wxss

.progress_box{

position:

relative;

width:220px;

height:

220px;

//

這里的寬高是必須大于等于canvas圓環(huán)的直徑

否則繪制到盒子外面就看不見了

//

一開始設置

width:440rpx;

height:440rpx;

發(fā)現(xiàn)

在360X640分辨率的設備，下繪制的圓環(huán)跑盒子外去了

//

小程序使用rpx單位適配

，但是canvas繪制的是px單位的。所以只能用px單位繪制的圓環(huán)在盒子內(nèi)顯示

display:

flex;

align-items:

center;

justify-content:

center;

background-color:

#eee;

}

.progress_bg{

position:

absolute;

width:220px;

height:

220px;

}

.progress_canvas{

width:220px;

height:

220px;

}

.progress_text{

position:

absolute;

display:

flex;

align-items:

center;

justify-content:

center

}

.progress_info{

font-size:

36rpx;

padding-left:

16rpx;

letter-spacing:

2rpx

}

.progress_dot{

width:16rpx;

height:

16rpx;

border-radius:

50%;

background-color:

#fb9126;

}第二步數(shù)據(jù)綁定從wxml中可以看到我們使用了一個數(shù)據(jù)progress_txt，所以在js中設置data如下：

data:

{

progress_txt:

'正在匹配中...',

},第三步canvas繪制敲黑板，劃重點1.先繪制背景在js中封裝一個畫圓環(huán)的函數(shù)drawProgressbg，canvas畫圓在onReady中執(zhí)行這個函數(shù)；小程序canvas組件與H5的canvas有點差別，請查看文檔，代碼如下drawProgressbg:

function(){

//

使用

wx.createContext

獲取繪圖上下文

context

var

ctx

=

wx.createCanvasContext('canvasProgressbg')

ctx.setLineWidth(4);//

設置圓環(huán)的寬度

ctx.setStrokeStyle('#20183b');

//

設置圓環(huán)的顏色

ctx.setLineCap('round')

//

設置圓環(huán)端點的形狀

ctx.beginPath();//開始一個新的路徑

ctx.arc(110,

110,

100,

0,

2

*

Math.PI,

false);

//設置一個原點(100,100)，半徑為90的圓的路徑到當前路徑

ctx.stroke();//對當前路徑進行描邊

ctx.draw();

},

onReady:

function

()

{

this.drawProgressbg();

},看一下效果如下：2.繪制彩色圓環(huán)在js中封裝一個畫圓環(huán)的函數(shù)drawCircle，在onReady中執(zhí)行這個函數(shù)；

drawCircle:

function

(step){

var

context

=

wx.createCanvasContext('canvasProgress');

//

設置漸變

var

gradient

=

context.createLinearGradient(200,

100,

100,

200);

gradient.addColorStop("0",

"#2661DD");

gradient.addColorStop("0.5",

"#40ED94");

gradient.addColorStop("1.0",

"#5956CC");

context.setLineWidth(10);

context.setStrokeStyle(gradient);

context.setLineCap('round')

context.beginPath();

//

參數(shù)step

為繪制的圓環(huán)周長，從0到2為一周

。

-Math.PI

/

2

將起始角設在12點鐘位置

，結束角

通過改變

step

的值確定

context.arc(110,

110,

100,

-Math.PI

/

2,

step

*

Math.PI

-

Math.PI

/

2,

false);

context.stroke();

context.draw()

},

onReady:

function

()

{

this.drawProgressbg();

this.drawCircle(2)

},3.設置一個定時器在js中的data設置一個計數(shù)器count,一個步驟step,一個定時器在js中封裝一個定時器的函數(shù)countInterval，在onReady中執(zhí)行這個函數(shù)；

data:

{

progress_txt:

'正在匹配中...',

count:0,

//

設置

計數(shù)器

初始為0

countTimer:

null

//

設置

定時器

初始為null

},

countInterval:

function

()

{

//

設置倒計時

定時器

每100毫秒執(zhí)行一次，計數(shù)器count+1

,耗時6秒繪一圈

this.countTimer

=

setInterval(()

=>

{

if

(this.data.count

<=

60)

{

/*

繪制彩色圓環(huán)進度條

注意此處

傳參

step

取值范圍是0到2，

所以

計數(shù)器

最大值

60

對應

2

做處理，計數(shù)器count=60的時候step=2

*/

this.drawCircle(this.data.count

/

(60/2))

this.data.count++;

}

else

{

this.setData({

progress_txt:

"匹配成功"

});

clearInterval(this.countTimer);

}

},

100)

},

onReady: