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

2025-10-14 15:56:13

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

无图无真相，先上图：

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

代码实现：

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; 

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序开发之圆形菜单仿建行圆形菜单实例

建行APP首页有个圆形菜单.仿了个玩具出来. 功能介绍: 1.一个圆形背景.六个item菜单.中间是微信用户的头像; 2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,随手指滚动,手指抬起,还会自动滚动一段时间; 上一张真机截图: 上代码: 1.index.js var app = getApp() Page({ data: { userInfo: {}, menuList: {},//菜单集合 animationData: {}, startPoint: {},//触摸开始
微信小程序实现实时圆形进度条的方法示例

前言最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧. 效果图如下初始状态点击中间按钮开始绘制绘制过程绘制结束实现思路建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条. WXML代码 <view class="wrap"> <view class="circle-box"> <canvas class
微信小程序（应用号）简单实例应用及实例详解

Demo 预览演示视频(流量预警 2.64MB) GitHub Repo 地址仓库地址:https://github.com/zce/weapp-demo 使用步骤将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正
微信小程序实现列表刷新的实例详解

微信小程序列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述. index.js var url = "
微信小程序实战小程序实例

微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用跳转传值使用等等等.... app.json全局配置文件 { "pages":[ "page
微信小程序参数传递详解

微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
详解微信小程序——自定义圆形进度条

微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con
小程序自定义圆形进度条

本文实例为大家分享了小程序自定义圆形进度条的具体代码,供大家参考,具体内容如下 circle.wxss: page { width: 100%; height: 100%; background-color: #fff; } .circle-box { text-align: center; margin-top: 10vw; } .circle { position: absolute; left: 0; right: 0; margin: auto; } .draw_btn { width:
微信小程序之圆形进度条实现思路

需求概要小程序中使用圆形倒计时,效果图: 思路使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval让彩色圆环逐步绘制. 解决方案第一步先写结构一个盒子包裹2个canvas以及文字盒子: 盒子使用相对定位作为父级,flex布局,设置居中: 一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg" 另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"
微信小程序自定义音乐进度条的实例代码

需求:显示音乐播放按钮.可手动拖拽进度条:页面中含多个音乐,播放当前音乐时暂停其他音乐播放. 小程序自带标签 audio 小程序自带的audio标签含固定的样式,且有最小尺寸.目前项目也不含name和author字段,所以放弃audio标签. 实现效果图初始化音乐数据 <text>{{currentProcess}}</text> <slider bindchange="" bindtouchstart="" bindtouchend
微信小程序画布圆形进度条显示效果

本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下效果图: 代码: wxml  <canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas> js // pages/test/test.js var context = new wx.createCanv
详解微信小程序自定义组件的实现及数据交互

简单的自定义组件本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量.便于维护,所以自定义了一个组件,每个页面直接调用即可.基本实现下图样式: 下面我们来一步步的实现它: step1:创建文件夹以及文件首先创建一个components(名字可自取)文件夹,用于放置所有自定义的组件, 里面可以用右键自动创建的方式,新建一个Component组件,例如: 创建之后的目录结构为: 其中callphone是我们本次要实现的拨打电话组件. step2:组件的基本搭建在callphone.w
微信小程序实现圆形进度条动画

本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下上图: 代码: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanvasContext('canvasArcCir'); Page({ data: { }, drawCircle: function () { clearInterval(varName); function drawArc(s, e) { ctx
微信小程序实现圆心进度条

本文实例为大家分享了微信小程序实现圆心进度条的具体代码,供大家参考,具体内容如下一.创建项目结构打开微信开发者工具创建一个项目, 新建与 pages 同级目录 components,在 components 中新建一个目录 circle ,circle 中新建 Component 命名为 circle,此时将自动生成 json.wxml.wxss.js 4 个文件.结构如下: 二.编写组件首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true,可将这一
详解微信小程序胶囊按钮返回|首页自定义导航栏功能

项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页
详解微信小程序（Taro）手动埋点和自动埋点的实现

每一个公司要想用户增长,都要收集和分析用户操作数据,因此埋点是必不可少的事情. 而对于前端职业发展来说,传统的手动埋点,无疑是繁琐又无聊的事情,能简化就简化. 一.手动埋点手动埋点就是在每一处需要的地方,都加一段上报埋点的代码.影响代码的阅读体验,且散落的埋点代码不方便管理. 以页面 pv 为例,我们此前是在每一个页面中上报 pv: // src/manual/home/index.tsx import tracking from "./tracking"; // pageSn 是前

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

相关推荐

随机推荐