微信小程序之圆形进度条实现思路_小程序圆形倒计时资源-CSDN文库

22 浏览量 2020-12-29 00:09:03 上传评论收藏 104KB PDF 举报

资源推荐

资源详情

资源评论

微信小程序之圆形进度条实现思路微信小程序之圆形进度条实现思路

需求概要需求概要

小程序中使用圆形倒计时，效果图：

思路思路

使用2个canvas 一个是背景圆环，一个是彩色圆环。

使用setInterval 让彩色圆环逐步绘制。

解决方案解决方案

第一步先写结构第一步先写结构

一个盒子包裹2个canvas以及文字盒子；

盒子使用相对定位作为父级，flex布局，设置居中；

一个canvas，使用绝对定位作为背景，canvas-id="canvasProgressbg“

另一个canvas，使用相对定位作为进度条，canvas-id="canvasProgress“

代码如下：

// wxml

<view class="container">

<view class='progress_box'>

<canvas class="progress_bg" canvas-id="canvasProgressbg"> </canvas>

<canvas class="progress_canvas" canvas-id="canvasProgress"> </canvas>

<view class="progress_text">

<view class="progress_dot"></view>

<text class='progress_info'> {{progress_txt}}</text>

</view>

</view>

</view>

// wxss

.progress_box{

position: relative;

width:220px;

height: 220px;

// 这里的宽高是必须大于等于canvas圆环的直径否则绘制到盒子外面就看不见了

// 一开始设置 width:440rpx; height:440rpx; 发现在360X640分辨率的设备，下绘制的圆环跑盒子外去了

// 小程序使用rpx单位适配，但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示

display: flex;

align-items: center;

justify-content: center;

background-color: #eee;

}

.progress_bg{

position: absolute;

width:220px;

height: 220px;

}

.progress_canvas{

width:220px;

height: 220px;

}

.progress_text{

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38696143

粉丝: 1
资源: 957

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip