微信小程式之圓形進度條（自定義元件）

首先需要在 json 檔案中進行自定義元件宣告（將 component 欄位設為 true 可這一組檔案設為自定義元件）

/* components/circle/circle.wxss */

.circle_box,.circle_draw
.circle_bg

元件的屬性值和內部資料將被用於元件 wxml 的渲染，其中，屬性值是可由元件外部傳入的。更多細節參見 component構造器 。

/* components/circle/circle.js */

component(,
properties: ,
draw: ,
},data: ,
methods: );
// 使用 wx.createcontext 獲取繪圖上下文 ctx 繪製背景圓環
var ctx = wx.createcanvascontext(id)
ctx.setlinewidth(w / 2);
ctx.setstrokestyle('#20183b');
ctx.setlinecap('round')
ctx.beginpath();//開始乙個新的路徑
//設定乙個原點(x,y)，半徑為r的圓的路徑到當前路徑 此處x=y=r
ctx.arc(x, x, x - w, 0, 2 * math.pi, false);
ctx.stroke();//對當前路徑進行描邊
ctx.draw();
},drawcircle: function (id, x, w, step) ,
/* 內部私有方法建議以下劃線開頭 ，
* 自定義元件觸發事件時，需要使用 triggerevent 方法，指定事件名、detail物件和事件選項 */
_runevent() 
},// 生命週期函式，可以為函式，或乙個在methods段中定義的方法名
onready: function () 
})

下面我們在index中使用 自定義元件圓形進度條

使用已註冊的自定義元件前，首先要在頁面的 json 檔案中進行引用宣告。此時需要提供每個自定義元件的標籤名和對應的自定義元件檔案路徑：

}

節點名即自定義元件的標籤名：circle；

節點屬性即傳遞給元件的屬性值：bg，draw；

當自定義元件觸發「runevent」事件時，呼叫「_runevent」方法。

}    

在wxss給 位置上的內容新增一些樣式

/**index.wxss**/

/*圓環進度條文字*/
.circle_info
.circle_dot 
.circle_txt

data: ,

onready: function () ,

`接下來要寫定時器方法了，在定時器中每隔一段時間呼叫一次 this.circle.drawcircle(id, x, w, step)

，通過改變step的值來動態繪製圓環`

在data中設定幾個初始值

定義乙個定時器方法countinterval，假設每隔100毫秒 count遞增+1，當 count遞增到100的時候剛好是乙個圓環，然後改變txt值並且清除定時器

在 onready 中呼叫這個定時器方法

data: ,

countinterval: function () else );
clearinterval(this.counttimer); 
}}, 100)
},onready: function () ,

count可以遞增，當然可以遞減。這裡就不在贅述，直接上**

wxml

} s

/*圓環倒計時*/

.circle_text
.circle_time

//獲取應用例項

page(,
stepinterval:function());
}this.data.num--;
} else );
}}, 100) 
},changetime:function());
// 重新開啟倒計時
this.stepinterval()
// 觸發自定義元件事件
this._runevent()
},onload: function () ,
onready: function () ,
_runevent() ,
})

微信小程式之圓形進度條

使用setinterval 讓彩色圓環逐步繪製。wxml class container class progress box class progress bg canvas id canvasprogressbg canvas class progress canvas canvas id ca...

自定義圓形進度條

author wangxiao public class roundprogressbar extends view public roundprogressbar context context,attributeset attrs public roundprogressbar context ...

自定義圓形進度條

之前做專案的時候有用到環形進度條，先是在網上找了一下第三方控制項，發現好用是好用，就是東西太多了，有點複雜，還不如自己寫乙個簡單點適合自己用的。先把自定義控制項的效果圖貼出來。其實我寫的這個控制項很簡單。索性就直接把原始碼貼出來吧。h檔案的內容就是一些宣告 import inte ce progre...