本文實(shí)例為大家分享了微信小程序實(shí)現(xiàn)環(huán)形進(jìn)度條的具體代碼，供大家參考，具體內(nèi)容如下
環(huán)形進(jìn)度條的組件已經(jīng)放在github上
環(huán)形進(jìn)度條效果圖
創(chuàng)建步驟
1、在根目錄創(chuàng)建名為components的文件夾，用來放需要引用的自定義組件。
2、創(chuàng)建名為canvas-ring的文件夾，用來放環(huán)形進(jìn)度條自定義組件。
3、鼠標(biāo)指著canvas-ring的文件夾 鼠標(biāo)右鍵 “新建 Component” 取名canvas-ring。
結(jié)構(gòu)圖：
環(huán)形進(jìn)度條組件的代碼
canvas-ring.json
{ "component": true, //這一定要寫成true "usingComponents": {} //可以引入其他自定義組件}canvas-ring.wxml
<canvas style="width:{{canvasWidth}}px;height:{{canvasWidth}}px;" canvas-id="circleBar"> <cover-view class="circle-bar-wrap" style="height:{{canvasWidth}}px;"> <cover-view class="font"> {{title}} </cover-view> <cover-view class="val" style="color: {{valueColor}}; margin-top:{{isMarginTop?'20':'0'}}rpx"> {{value}} {{suffix}} </cover-view> </cover-view></canvas><slot></slot>canvas-ring.wxss
.circle-bar-wrap{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-sizing: border-box; padding: 0 20%;}.circle-bar-wrap .font{ max-height: 62rpx; font-size: 26rpx; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space: normal;}.circle-bar-wrap .val{ margin-top: 20rpx; font-size: 50rpx; height: 65rpx;}canvas-ring.js
var windWidth = wx.getSystemInfoSync().windowWidth;Component({ options: { multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持 }, /** * 組件的屬性列表 */ properties: { //畫布的寬度 默認(rèn)占屏幕寬度的0.4倍 canvasWidth: { type: Number, value: windWidth * 0.4 }, //線條寬度 默認(rèn)10 lineWidth: { type: Number, value: 10 }, //線條顏色 默認(rèn)"#393" lineColor: { type: String, value: "#393" }, //標(biāo)題 默認(rèn)“完成率” title: { type: String, value: "完成率" }, //當(dāng)前的值 默認(rèn)45 value: { type: Number, value: 45 }, //值的顏色 默認(rèn)"#ff9c07" valueColor:{ type: String, value: "#ff9c07" }, //最大值 默認(rèn)100 maxValue: { type: Number, value: 100 }, //最小值 默認(rèn)0 minValue: { type: Number, value: 0 }, //當(dāng)前值的后綴名 suffix: { type: null, value: "%" }, //從什么角度開始 0~360之間 （12點(diǎn)方向?yàn)?,18點(diǎn)方向?yàn)?80,0點(diǎn)方向?yàn)?60） startDegree: { type: Number, value: 0 } }, /** * 組件的初始數(shù)據(jù) */ data: { canvasWidth: windWidth * 0.4, isMarginTop: true }, /** * 組件的方法列表 */ methods: { showCanvasRing() { //去掉首位空格后如果標(biāo)題為空，那么當(dāng)前值的區(qū)域就沒有margin-top值 if (this.data.title.replace(/(^/s*)|(/s*$)/g, "").length == 0) { this.setData({ isMarginTop: false }) } //作畫 var ctx = wx.createCanvasContext("circleBar", this); //canvas組建封裝，需要后加個(gè)this var circle_r = this.data.canvasWidth / 2; //畫布的一半，用來找中心點(diǎn)和半徑 var startDegree = this.data.startDegree; //從什么角度開始 var maxValue = this.data.maxValue; //最大值 var minValue = this.data.minValue; //最小值 var value = this.data.value; //當(dāng)前的值 var lineColor = this.data.lineColor; //線條顏色 var lineWidth = this.data.lineWidth; //線條寬度 var percent = 360 * ((value - minValue) / (maxValue - minValue)); //計(jì)算結(jié)果 //定義起始點(diǎn) ctx.translate(circle_r, circle_r); //灰色圓弧 ctx.beginPath(); ctx.setStrokeStyle("#ebebeb"); ctx.setLineWidth(lineWidth); ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true); ctx.stroke(); ctx.closePath(); //有色彩的圓弧 ctx.beginPath(); ctx.setStrokeStyle(lineColor); ctx.setLineWidth(lineWidth); ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, percent * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false); ctx.stroke(); ctx.closePath(); ctx.draw(); } }})使用環(huán)形進(jìn)度條組件
index.json
{ "usingComponents": { "canvas-ring": "/components/canvas-ring/canvas-ring" }}index.wxml
<canvas-ring id="canvasRing" value="{{c_val}}"></canvas-ring>index.js
onReady: function() { var that = this; that.canvasRing = that.selectComponent("#canvasRing"); that.canvasRing.showCanvasRing();},組件的屬性介紹
環(huán)形進(jìn)度條的組件已經(jīng)放在github上
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
