微信小程序实现美美的虚线圆形进度圈

最新推荐文章于 2024-04-10 23:09:07 发布
最新推荐文章于 2024-04-10 23:09:07 发布
阅读量2.1k 收藏 3
点赞数
分类专栏： 小程序 文章标签： 微信 绿色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li3007liuu/article/details/76017661
版权
本文介绍如何在微信小程序中创建一个美观的虚线圆形进度圈，通过3层绘图技术，包括灰色底圆、绿色进度圆以及白色线条，实现进度细分展示。示例包含wxml、wxss和js代码片段。
摘要由CSDN通过智能技术生成

先上效果图：
这里写图片描述
实现过程采用3层绘图，底层为灰色圆圈，中层为前景带进度设置的绿色圆圈，顶层为100条白色线条，将圆圈分成虚线进度条。这样实现的进度圈，可以在单个进度圈内部进行细分呈现更细致的进度；
下面为wxml中代码

    <canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc">
    </canvas>

下面为wxss样式代码

最低0.47元/天 解锁文章
萧玉竹
关注
专栏目录
微信小程序 -- canvas：实现圆形进度条
Emily
07-19 2180
先放效果图，如下： 1. wxml文件代码如下 对于圆形进度条中间的文字，如果是简单的，可以用它自带的属性去填充。 比较复杂的，就可以像下面，通过样式将文字定位到圆形进度条中间合适位置。 <view class='circlePage'> <view class='wrap'> <!-- 圆形中间的文字 --> <view cl...
微信小程序加虚线
yzy1970185464的博客
12-05 1万+
.cartLeft{ width: 50%; height: 100rpx; border-right: 1rpx dashed #a7a8a8; }
微信小程序制作圆形进度条
最新发布
老D工作室
04-10 1764
选择一个目录建立一个文件夹，比如 mycircle 吧，另外把对应 page 的相关文件都建立出来，包括 js，json，wxml 和 wxcc。
微信小程序用canvas 绘制虚线
qq_44170622的博客
04-27 2399
1：效果图 代码： <canvas style="width: 300px; height: 1rpx;" canvas-id="firstCanvas" class="line" ></canvas> // 绘制一条虚线 drawLine() { var context = wx.createCanvasContext('firstCanvas'); context
基于微信小程序的点餐系统设计与实现 毕业论文.docx
04-30
本文档是一篇关于基于微信小程序的点餐系统设计与实现的毕业论文，旨在利用微信小程序这一日益普及的技术，优化餐厅点餐流程，提供便捷的在线点餐服务。论文详细介绍了系统的开发背景、技术选型、需求分析、系统设计...
微信小程序 实例汇总 完整项目源代码
11-01
4. **API调用**：微信小程序提供了丰富的API接口，如网络请求、地图、位置、媒体、文件、用户授权等，开发者可以利用这些API实现各种功能。 5. **组件化开发**：小程序支持组件化开发，如view、button、image、...
微信小程序源码大全（130个）
04-21
通过这些源码，你可以深入理解微信小程序的架构、开发流程以及常见功能的实现。 首先，微信小程序的开发基础是JavaScript、WXML（WeChat Markup Language）和WXSS（WeChat Style Sheets）。JavaScript负责逻辑处理...
微信小程序之圆形进度条
weixin_34292402的博客
02-08 1197
需求概要 小程序中使用圆形倒计时，效果图： 思路 使用2个canvas 一个是背景圆环，一个是彩色圆环。 使用setInterval 让彩色圆环逐步绘制。 解决方案 第一步先写结构 一个盒子包裹2个canvas以及文字盒子；盒子使用相对定位作为父级，flex布局，设置居中；一个canvas，使用绝对定位作为背景，canvas-id="...
微信小程序：静态圆形进度条实现
欢迎进入JesseAndroid的博客
10-23 2038
效果图： 实现： function drawCircleProgress(canvasId, backStrokeColor,strokeColor,x,y,radius,percent,text,fontSize,fontColor){ // console.log("canvasId : " + canvasId + " ; backStrokeColor : " + backS...
微信小程序——自定义圆形进度条
热门推荐
wl1769127285的专栏
12-28 1万+
实现自定义控件，展示全部代码，并解释实现思路
微信小程序之圆形进度条（自定义组件）
weixin_33757609的博客
02-09 1113
前言 昨天在微信小程序实现了圆形进度条，今天想把这个圆形进度条做成一个组件，方便以后直接拿来用。根据官方文档自定义组件一步一步来 创建自定义组件 第一步创建项目结构 打开微信开发者工具创建一个项目，新建目录 components 与 pages 目录同级在components中新建一个目录circle在circle中新建 Componen...
python中alpha_python – 散点图中的单个alpha值
weixin_39621860的博客
12-05 1407
我想知道是否可以使用Matplotlib的散射函数为每个点绘制单独的alpha值.我需要绘制一组点,每个点都有一个alpha值.例如,我有这个代码来绘制一些点def plot_singularities(points_x, p, alpha_point, file_path):plt.figure()plt.scatter(points_x, points_y, alpha=alpha_point...
微信小程序 环形进度条_Web微信小程序圆环形进度条组件CSS实现
weixin_29266749的博客
01-17 1328
首先理解小程序的自定义组件。原理看了网上的一些教程，实现圆环用的是两个半圆的旋转，通过overflow: hidden来控制的。首先绘制底层容器，一个正方形，通过圆角变圆，用来作为未读进度的圆环。然后在上面绘制两个半矩形，在圆形矩形中绘制两个半圆(通过border-left/right/top/bottom加上旋转角来实现，默认的旋转角为135°)。 通过控制半圆矩形(即半圆的父容器)，由于ov...
【微信小程序】圆环进度条
牛哞哞杂记
11-13 3121
① 生成用于倒计时的圆环，通过代码来控制圆环的倒计时进度。要做到重新进页面，圆环不会重新归零。index.wxml 部分，使用 canvas 绘制两个圆环。以及显示中间的倒计时。再计算出总时间、已经使用多久时间和还剩的时间。开始时间和结束时间可以自定义的。计算出圆环进度条的开始位置和结束位置，以及圆环中间的时间。index.js 里，先绘制白色圆环。③ 倒计时的时间可以自定义。② 圆环中间会有倒计时。
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
weixin_33439618的博客
02-05 1230
微信小程序 自定义圆形进度条，具体如下：无图无真相，先上图：实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。代码实现：JS代码：页面初始化 options为页面跳转所带来的参数},onReady: function () {// 页面渲染完成var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。c...
微信小程序canvas 画圆形带刻度进度条
ink_s的博客
07-10 4351
.canvas_1{ position: absolute; width: 120rpx; height: 120rpx; background: rgba(255, 00, 0, 0.0); } <canvas class='canvas_1' canvas-id="Canvas1"/> 画进度条（我这是固定分为32等分，可以设置变量，分为任意等分...
微信小程序实现动态圆形进度条详细步骤
"微信小程序实现实时圆形进度条的方法示例" 在微信小程序开发中，创建实时圆形进度条是一项常见的需求，特别是在制作交互式的UI组件时，如录制按钮的进度反馈。本文将介绍如何利用HTML5的Canvas API在微信小程序中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值