微信小程序实现圆形进度条实例分享

发布日期： 2018-02-09 阅读量： 作者： 网络

本文主要和大家分享微信小程序实现圆形进度条实例，希望能帮助到大家。

小程序中使用圆形倒计时，效果图：
微信小程序实现圆形进度条实例分享

思路

使用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>

# 小程序 # 实例 # 进度

上一篇: 织梦cms能做电影网站吗

下一篇: centos如何挂载硬盘？

微信小程序实现圆形进度条实例分享

随便看看