最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
微信小程序如何实现自定义圆形进度条的教程
时间：2016-12-29 编辑：简简单单 来源：一聚教程网
微信小程序 自定义圆形进度条，具体如下：
无图无真相，先上图：
实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。
代码实现：
JS代码：
|
Page({
data: {},
onLoad:function(options) {
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function() {
// 页面渲染完成
varcxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文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() {
// 页面关闭
}
})
|
页面布局：
|
|
CSS样式：
|
.cir{
display: inline-block;
margin-top:20rpx;
}
.top{
text-align:center
}
.cc{
margin-top:-120px;
}
|
-
上一个： js中有效提高数据访问速度的方法
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31