|
導(dǎo)讀微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項(xiàng)門檻非常高的創(chuàng)新,經(jīng)過(guò)將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 文章主要介紹了詳解微信小程序——自定義圓形進(jìn)度條,具有一定的參考價(jià)值,實(shí)現(xiàn)思路,先繪制底層的灰色圓圈背景,再繪制上層的藍(lán)色進(jìn)度條。JS代碼: Page({
data: {},
onLoad: function (options) {
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
},
onReady: function () {
// 頁(yè)面渲染完成
var cxt_arc = wx.createCanvasContext('canvasArc');//創(chuàng)建并返回繪圖上下文context對(duì)象。
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#d2d2d2');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//開始一個(gè)新的路徑
cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//設(shè)置一個(gè)原點(diǎn)(106,106),半徑為100的圓的路徑到當(dāng)前路徑
cxt_arc.stroke();//對(duì)當(dāng)前路徑進(jìn)行描邊
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#3ea6ff');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//開始一個(gè)新的路徑
cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false);
cxt_arc.stroke();//對(duì)當(dāng)前路徑進(jìn)行描邊
cxt_arc.draw();
},
onShow: function () {
// 頁(yè)面顯示
},
onHide: function () {
// 頁(yè)面隱藏
},
onUnload: function () {
// 頁(yè)面關(guān)閉
}
})<view class="wrap"> <view class="top"> <canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc"> </canvas> <view class="cc">中間</view> </view> </view> CSS樣式: .cir{
display: inline-block;
margin-top: 20rpx;
}
.top{
text-align: center
}
.cc{
margin-top: -120px;
}以上就是微信小程序之制作自定義圓形進(jìn)度條的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或者搜一下即可打開應(yīng)用。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!