微信小程序自定义组件初学

首先选择的小程序代码中有一个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的主要内容。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值