进度条上的小圆点怎么做_手把手，教你在小程序里做一个圆形进度条

作者：月影

今天想把之前在微信小程序开发过程中，制作的一个圆形进度条做成一个组件，方便以后直接拿来用。

创建自定义组件

一、创建项目结构

二、编写组件

首先需要在 JSON文件中进行自定义组件声明(将component字段设为true，可将这一组文件设为自定义组件)。

同时，还要在 WXML文件中编写组件模版，在 WXSS文件中加入组件样式，这里编写圆环进度条的模板和样式，参见微信小程序之圆形进度条。

要注意canvas绘制的是 px 为单位的，所以这里统一用 px 单位；其中size是根据canvas绘制的圆环的直径，后面在 JS 中会提到。

在组件的 WXML 中可以包含slot节点，用于承载组件使用者提供的 WXML 结构。

注意：在组件 WXSS中不应使用 ID 选择器、属性选择器和标签名选择器。

编写 JS

在自定义组件的 JS 文件中，需要使用Component()来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 WXML 的渲染，其中，属性值是可由组件外部传入的。更多细节参考官方文档 Component 构造器。

自定义组件圆形进度条到此已经完成。

使用自定义组件

下面我们在index中使用自定义组件圆形进度条。

一、 文件中进行引用声明

使用已注册的自定义组件前，首先要在页面的 JSON文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

二、WXML文件中使用自定义组件

这样，在页面的 WXML 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

节点名即自定义组件的标签名：circle；

节点属性即传递给组件的属性值：bg，draw；

当自定义组件触发runEvent事件时，调用_runEvent方法。

自定义组件的 WXML 节点结构在与数据结合之后，将被插入到引用位置内。在 WXSS 给slot位置上的内容添加一些样式。

三、JS文件中调用自定义组件中的方法

在 WXML 中我们用到一个数据{}，我们需要在 JS 中设置一下data，然后在onReady中使用selectComponent选择组件实例节点。

效果如下：

在data中设置几个初始值；

定义一个定时器方法countInterval，假设每隔 100 毫秒count递增

+1，当 递增到 100 的时候刚好是一个圆环，然后改变txt值并且清除定时器；

在onReady中调用这个定时器方法。

最终效果

再次使用自定义组件做倒计时

可以递增，当然可以递减。这里就不在赘述，直接上代码：

WXML

WXSS

JS

最终效果