詳解微信小程序——自定義圓形進度條
更新時間：2016年12月29日 11:31:53 作者：wlvoid
這篇文章主要介紹了詳解微信小程序——自定義圓形進度條，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
微信小程序 自定義圓形進度條，具體如下：
無圖無真相，先上圖：
實現(xiàn)思路，先繪制底層的灰色圓圈背景，再繪制上層的藍色進度條。
代碼實現(xiàn)：
JS代碼：
Page({
data: {},
onLoad: function (options) {
// 頁面初始化 options為頁面跳轉所帶來的參數(shù)
},
onReady: function () {
// 頁面渲染完成
var cxt_arc = wx.createCanvasContext('canvasArc');//創(chuàng)建并返回繪圖上下文context對象。
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#d2d2d2');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//開始一個新的路徑
cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//設置一個原點(106,106)，半徑為100的圓的路徑到當前路徑
cxt_arc.stroke();//對當前路徑進行描邊
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#3ea6ff');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//開始一個新的路徑
cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false);
cxt_arc.stroke();//對當前路徑進行描邊
cxt_arc.draw();
},
onShow: function () {
// 頁面顯示
},
onHide: function () {
// 頁面隱藏
},
onUnload: function () {
// 頁面關閉
}
})
頁面布局：
<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;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了微信小程序開發(fā)中遇到的幾個小問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了uni-app web-view的使用，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
elementui更改el-dialog關閉按鈕的圖標d的示例代碼
這篇文章主要介紹了elementui更改el-dialog關閉按鈕的圖標，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
這篇文章主要給大家介紹了關于javascript中數(shù)組的常用算法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用javascript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
這篇文章主要介紹了JS call()及apply()方法使用實例匯總,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
微信小程序如何使用小程序API，去調用微信提供的各種內置能力（即微信API）。小程序開發(fā)框架提供豐富的微信原生API，可以方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。2022-12-12
只有msg是必須的，后面的參數(shù)可以省略。如果中間的參數(shù)為空則在對應位置上''或者""表示（根據實際情況選擇單雙引號） 調用此方法須在每個使用的頁面的head區(qū)域加入下面代碼。2009-11-11
javascript日期對象格式化為字符串的實現(xiàn)方法
本篇文章主要是對javascript日期對象格式化為字符串的實現(xiàn)方法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
最近在使用clipboard.js碰到的一個小問題，通過查找相關資料解決了，所以下面這篇文章主要給大家介紹了關于clipboard.js在移動端復制失敗的解決方法，需要的朋友可以參考借鑒，下面來一起學習學習吧2018-06-06
JavaScript實現(xiàn)的一個計算數(shù)字步數(shù)的算法分享
這篇文章主要介紹了JavaScript實現(xiàn)的一個計算數(shù)字步數(shù)的算法分享,本文先是講解了算法描述與實現(xiàn)原理,然后給出實現(xiàn)代碼,需要的朋友可以參考下2014-12-12