对象说晚饭吃什么太难选择,问我能不能做一个九宫格抽奖来决定我们晚上吃什么,emmm。 既然对象都开口了,不做也不行啊,最后给大家看一个简化版的(没有美工样式、编辑奖品这
对象说晚饭吃什么太难选择,问我能不能做一个九宫格抽奖来决定我们晚上吃什么,emmm。 既然对象都开口了,不做也不行啊,最后给大家看一个简化版的(没有美工样式、编辑奖品这些) 前期构思首先是布局,这个比较简单,用弹性布局(flex)就足够了,抽奖盒子固定宽高,奖品项为盒子的1/3,超过换行就行,转动方向是这样的: 抽奖方式主要分为两种,一种是随机抽取(完全随机),还有一种是指定奖品抽取(瞒着女朋友加的功能????,为了以后能吃到自己喜欢的东西) 转动速度的规则是:加速 -> 匀速 -> 减速。 代码实现用了 vue3。 具体实现1、布局布局采用弹性布局,利用 vue 的 v-for 动态生成九个 item ,select 样式是用来控制转动的时候当前选中的 item。 这里循环的key值,我使用的索引值,主要是为了后面添加编辑奖品的时候,id不一定能保证按顺序排列,所以用索引值比较直观。
2、指定奖品为每一个 item 添加单机事件 appoint(index),传入参数为当前的索引值。 做成点击事件指定奖品主要是为了不让对象发现
3、抽奖抽奖的具体实现:
转动的方法实现 这里需要注意的是,我们使用的是索引值,所以转动一圈为0~8,而不是1~9
转动规则的方法 转动速度分为4个阶段
经过计算,在圈数的分为内,最后的减速转动,不能把速度减少到 300 之上,所以不会出现最后 9 个加速转动的情况
最终效果 |
2021-06-04
2019-01-10
2019-02-17
2021-09-12
2021-09-30