小程序开发中如何如何实现自定义进度条

　　介绍

这篇文章给大家介绍小程序开发中如何如何实现自定义进度条,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

具体内容如下

循环。wxs:

页面 　　宽度:100%; 　　高度:100%; 　　background - color: # fff; 　　} 　　 　　.circle-box { 　　text-align:中心; 　　大众margin-top: 10; 　　} 　　 　　.circle { 　　位置:绝对的; 　　左:0; 　　右:0; 　　保证金:汽车; 　　} 　　 　　.draw_btn { 　　宽度:35大众; 　　位置:绝对的; 　　上图:33大众; 　　右:0; 　　左:0; 　　保证金:汽车; 　　边界:1 px # 000固体; 　　border - radius: 5大众; 　　}

循环。wxml:

& lt;视图类=皐rap"比; 　　& lt;视图类=癱ircle-box"祝辞 　　& lt;帆布类=癱ircle"canvas-id=癱anvasCircle"比; 　　& lt;/canvas> 　　& lt;帆布类=癱ircle"canvas-id=癱anvasArcCir"比; 　　& lt;/canvas> 　　& lt;视图类=癲raw_btn"祝辞 　　& lt; view> 80分& lt;/view> 　　& lt; view>(满分100分)& lt;/view> 　　& lt;/view> 　　& lt;/view> 　　& lt;/view>

循环。js: 

///圈/circle.js页面//获取应用实例
　　const应用=getApp ()
　　var ctx=wx.createCanvasContext (& # 39; canvasArcCir& # 39;);
　　页面({/* *
　　*页面的初始数据
　　*/数据:{
　　
　　},
　　drawCircle:函数(){
　　函数drawArc (s、e) {
　　ctx.setFillStyle(& # 39;白色# 39;);
　　ctx。clearRect (0, 0, 200, 200);
　　ctx.draw ();
　　var x=100,
　　y=100,
　　半径=96;
　　ctx.setLineWidth (5);
　　ctx.setStrokeStyle (& # 39; # d81e06& # 39;);
　　ctx.setLineCap(& # 39;轮# 39;);
　　ctx.beginPath ();//圆心的x, y坐标,半径半径s:起始弧度,单位弧度(在3点钟方向)e:终止弧度,:假弧度的方向是否是逆时针
　　ctx。弧(x, y,半径,年代,e,假);
　　ctx.stroke ()
　　ctx.draw ()
　　}
　　var=70步,
　　startAngle=1.5 * Math.PI,
　　endAngle=0,
　　n=100,
　　endAngle=一步* 2 *数学。π/n + 1.5 * Math.PI;
　　drawArc (startAngle endAngle);
　　
　　},/* *
　　*生命周期函数——监听页面加载
　　*/>关于小程序开发中如何如何实现自定义进度条就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
小程序开发中如何如何实现自定义进度条