轮盘之自定义组件

来自组内 xu 同学：
首先选择的小程序代码中有一个pages页面下json中有usingComponents，然后里面加了一个不在Pages目录下的页面

小程序官网的解释

component是用于自定义组件的构造器

usingComponent多了一些需要注意的地方。
总之这就是自定义组件的构造方法。

然后在这个自定义的zhuanpan里

查腾讯官方文档里知道这是创建audio的对象，就是播放音乐的


只有options和properties是官方给的定义段：


并且图中的注释也把功能介绍了
下面就是转盘的属性定义段（具体细节如图注释）：

下面是转盘的列表定义：

如下为转盘的动作实现：

block1-4是转盘转动时的四个阶段

然后用到audio对象绑定了3个播放音乐：

一下为初始化数据的代码：

这段代码中awards是上面提到的转盘的定义里的，定义t为选项数组的长度，也就是选项的个数，
下面awardsConfig求出的item2Deg和afterDeg就是每一个选项的其实边框位置和末边框位置，也就是确定出这一选项在转盘中的位置

上面animation是动画的定义，timingfunction是一个让动画开始和结束慢，中间快的属性，还有其他属性如下：

timingfunction的值如下：

animation.rotate是旋转动画，
还有其他动画格式如下：

还有其他如缩放、平移、xyz轴坐标变换的操作就不一一列出。
后面的.step功能如下：

在下面setData里animation.export（）是用来清楚之前动画的

下面的循环是让每一个选项的透明度改为1

这个功能是配合后面函数实现选中一个选项后令其他背景虚化的。

下面是切换转盘的函数：

setData就是重置数据
initAdards函数是前面提到的确定转盘每个选项的位置的函数
if（flag） 当flag值为1，即需要改变转盘时，调用reset（）函数重置转盘

然后取消定时器timer

timer就是下面实现转盘背景虚化的函数
选中的透明度为1，未选中的全部变为0
下面三个inneraudiocontext类型的对象的stop方法就是让三个阶段的音乐全部停止

最后一个


移除repeatArr

接下来就是转盘开始转动的各种设定了

下面是转盘关于概率的问题

开启了概率就可以暗箱操作了。
以上就是小程序自定义组件中zhuanpan.js的主要内容。