当前位置: 首页 > 编程笔记 >

详解微信小程序——自定义圆形进度条

澹台欣怿
2023-03-14
本文向大家介绍详解微信小程序——自定义圆形进度条,包括了详解微信小程序——自定义圆形进度条的使用技巧和注意事项,需要的朋友参考一下

微信小程序 自定义圆形进度条,具体如下:

无图无真相,先上图:

实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条。

代码实现:

JS代码:

Page({ 
 data: {}, 
 onLoad: function (options) { 
  // 页面初始化 options为页面跳转所带来的参数 
 }, 
 onReady: function () { 
 
  // 页面渲染完成 
  var cxt_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 () { 
  // 页面关闭 
 } 
}) 

页面布局:

<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; 
  
} 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍微信小程序自定义组件实现环形进度条,包括了微信小程序自定义组件实现环形进度条的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 微信小程序自定义组件官方教程 环形进度条的组件已经放在github上 环形进度条效果图 创建步骤 1、在根目录创建名为components的文件夹,用来放需要引用的自定义组件。 2、创建

  • 本文向大家介绍微信小程序画布圆形进度条显示效果,包括了微信小程序画布圆形进度条显示效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下 效果图: 代码: wxml js 为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。 以上就是本文的全部内容,希望对大家的学习有所帮助

  • 本文向大家介绍微信小程序自定义prompt组件步骤详解,包括了微信小程序自定义prompt组件步骤详解的使用技巧和注意事项,需要的朋友参考一下 步骤一:新建一个component的文件夹,用来放所有的自定义组件;  步骤二:在该目录下新建一个prompt的文件夹,用来放prompt组件;  步骤三:右击–>新建–>component 直接上代码 wxml js json wxss 使用  例如,在

  • 本文向大家介绍Android动态自定义圆形进度条,包括了Android动态自定义圆形进度条的使用技巧和注意事项,需要的朋友参考一下 效果图: A.绘制圆环,圆弧,文本 B.自定义属性的具体步骤 具体步骤: 1. 定义属性: 在values目录下创建attrs.xml 2. 在布局文件中引用当前应用的名称空间 3. 在自定义视图标签中使用自定义属性 4. 在自定义View类的构造方法中, 取出布局中

  • 本文向大家介绍android自定义进度条渐变圆形,包括了android自定义进度条渐变圆形的使用技巧和注意事项,需要的朋友参考一下 在安全卫生上,经常看到有圆形的进度条在转动,效果非常好看,于是就尝试去实现一下,具体实现过程不多说了,直接上效果图,先炫耀下。 效果图: 分析:比较常见于扫描结果、进度条等场景 利用canvas.drawArc(RectF oval, float startAngle

  • 本文向大家介绍Android实现自定义圆形进度条,包括了Android实现自定义圆形进度条的使用技巧和注意事项,需要的朋友参考一下 今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制当前进度的百分比字符 4.绘制一个与之前实心圆相同颜色的空心圆 5.逐渐改变当前的百分比 6.根据百分比