微信小程序九宫格抽奖和转盘抽奖的实现

最近在工作中遇到了小程序抽奖的一些页面制作，以前制作网页抽奖的时候，在jQuery插件库谁便找一个Demo就可以满足我们的需求了，自己动手写的话不仅会拖慢项目进度，而且写出来的也未必有别人的那么流畅自然。而在小程序中我们就没有这么幸福了(ಥ﹏ಥ)，并没有丰富的插件库供给我们使用，所以该写的还得自己动手写。好了，下面是常见的两种抽奖方式：九宫格和转盘，在实际项目中用的还不错，分享给大家。

效果：

思路：    首先是结构上，用弹性布局就可以了，每一个奖品的宽度设置成3分之1，超出3个后让它换行；然后需要定义一个数组用来存放界面的奖品， 因为第五个内容是按钮，所以需要设置一个类型字段用来区分奖品和按钮。又因为需要一个旋转动画的效果，所以需要在奖品数组中设置一个是否已选中的状态字段。    接着是逻辑上，因为旋转的轨迹是顺时针的，所以得出轨迹的执行顺序数组为：[0, 1, 2, 5, 8, 7, 6, 3]，接着我们只需要循环这个数组，在里面设置一个定时器，让它能够在n秒后把第n个奖品的状态改为已选中，这样经过一个循环后，就可以实现动画旋转一圈的视觉效果了；可以旋转一圈后我们可以把这段代码先封装起来，接着我们只需要去循环这段代码，并且再套一个计时器，这样就可以实现旋转多圈的效果了。    想法是完美的，但是实际项目中还存在很多的因素，比如说旋转每一圈中的衔接时间，调教旋转中的速度，让动画在最后一圈停留在对应的奖品上，这都是开发时要攻破的难关，具体还得认真观看下面代码。

wxml: