需要一个圆形进度插件，可以用canvas实现，加载速度与粒度可以自行调节，根据sec 与 speed 进行计算，欢迎交流指导
wxml页面
<view class="loading-warp">
<canvas class="canvas" canvas-id="canvasCircle"></canvas>
<canvas class="canvas-mask" canvas-id="canvasRing"></canvas>
<view class="rate">{{step}}%</view>
</view>
<view class="loading-tips">{{tips}}</view>wxss部分
/* loading start */
.loading-warp {
z-index: 0;
position: relative;
margin: 100px auto 20px;
width: 200px;
height: 200px;
}
.canvas {
z-index: 1;
width: 200px;
height: 200px;
}
.canvas-mask {
z-index: 2;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.rate {
z-index: 1;
position: absolute;
top: 80px;
left: 0;
width: 100%;
text-align: center;
color: #fff;
font-size: 40rpx;
}
.loading-tips {
text-align: center;
font-size: 40rpx;
font-weight: 400;
color: #fff;
}
/* loading end */js部分
Page({
data: {
tips: '加载中',
step: 0
},
onReady: function(){
var me = this;
var cxt = wx.createCanvasContext('canvasCircle');
cxt.setLineWidth(6);
cxt.setStrokeStyle('#eaeaea');
cxt.setLineCap('round');
cxt.beginPath();
cxt.arc(100, 100, 96, 0, 2 * Math.PI, false);
cxt.stroke();
cxt.draw();
//加载动画
var steps = 1,startAngle = 1.5 * Math.PI,endAngle = 0,speed = 100,sec = 100;
function drawing (s, e) {
var context = wx.createCanvasContext('canvasRing');
context.setLineWidth(6);
context.setStrokeStyle('#11be0f');
context.setLineCap('round');
context.beginPath();
context.arc(100, 100, 96, s, e, false);
context.stroke();
context.draw();
}
function drawLoading (){
if(steps < 101){
//这里用me,同步数据,渲染页面
me.setData({
step: steps
})
endAngle = steps * 2 * Math.PI / speed + startAngle;
drawing(startAngle, endAngle);
steps++;
console.log(steps);
}else{
clearInterval(this.interval);
}
}
this.interval = setInterval(drawLoading,sec);
}
})
