使用mpvue来实现九宫格抽奖功能

今天来封装一个九宫格抽奖的组件 随时用随时拿。

效果图

效果图

效果图

实现原理

1.将奖品按照抽奖转动的顺序通过css去定位

2.通过索引控制一个高亮的类名,来实现跑马灯的效果

3.一般这种跑马灯转动是有速度的转变效果,先快后慢,最后停止,想要实现这个效果,我们可以在一个定时器内进行一系列的操作

上代码

这个是组件的代码 下面会有页面调用以及父子传参的介绍哦

1.html

2.js

3.css

父页面引用

为了更方便的展示，抽奖的选项我是用图片来进行一个展示，样式大家可以根据自己的设计来进行修改，数据格式也可按照后台返回的进行调整。

以上就是所有的代码，可以根据自己的需求去进行调整。

下面给大家总结一下核心代码

1.核心代码就是stopLuck函数,整个函数在一个定时器中,通过activatedColorIndex 索引值变化,实现转动效果
2.由于每次只跳动一步,需要在stop函数中调用stopLuck函数,达到连续跑动效果
3.当满足时间 && 后台返回中奖值时或者抽中奖品值匹配时,清除定时器,弹出中奖内容
4.加减速是通过speed值控制的,同时他也是定时器中设置的 等待的时间值,值越大,等待越久,就越慢;反之越快