您好,登錄后才能下訂單哦!
這篇文章給大家介紹小程序開發(fā)中如何如何實現(xiàn)自定義進度條,內(nèi)容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
具體內(nèi)容如下
circle.wxss:
page { width: 100%; height: 100%; background-color: #fff; } .circle-box { text-align: center; margin-top: 10vw; } .circle { position: absolute; left: 0; right: 0; margin: auto; } .draw_btn { width: 35vw; position: absolute; top: 33vw; right: 0; left: 0; margin: auto; border: 1px #000 solid; border-radius: 5vw; }
circle.wxml:
<view class="wrap"> <view class="circle-box"> <canvas class="circle" canvas-id="canvasCircle"> </canvas> <canvas class="circle" canvas-id="canvasArcCir"> </canvas> <view class="draw_btn"> <view>80分</view> <view>(滿分100分)</view> </view> </view> </view>
circle.js:
// pages/circle/circle.js //獲取應(yīng)用實例 const app = getApp() var ctx = wx.createCanvasContext('canvasArcCir'); Page({ /** * 頁面的初始數(shù)據(jù) */ data: { }, drawCircle: function() { function drawArc(s, e) { ctx.setFillStyle('white'); ctx.clearRect(0, 0, 200, 200); ctx.draw(); var x = 100, y = 100, radius = 96; ctx.setLineWidth(5); ctx.setStrokeStyle('#d81e06'); ctx.setLineCap('round'); ctx.beginPath(); //圓心的 x,y坐標,radius半徑 s:起始弧度,單位弧度(在3點鐘方向) e:終止弧度,:false弧度的方向是否是逆時針 ctx.arc(x, y, radius, s, e, false); ctx.stroke() ctx.draw() } var step = 70, startAngle = 1.5 * Math.PI, endAngle = 0, n = 100, endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI; drawArc(startAngle, endAngle); }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function(options) { //調(diào)用畫圓的方法 this.drawCircle() }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function() { //創(chuàng)建并返回繪圖上下文context對象。 var cxt_arc = wx.createCanvasContext('canvasCircle'); cxt_arc.setLineWidth(6); cxt_arc.setStrokeStyle('#eaeaea'); cxt_arc.setLineCap('round'); cxt_arc.beginPath(); cxt_arc.arc(100, 100, 96, 0, 2 * Math.PI, false); cxt_arc.stroke(); cxt_arc.draw(); }, })
關(guān)于小程序開發(fā)中如何如何實現(xiàn)自定義進度條就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。