react实现九宫格抽奖

九宫格实现抽奖功能

需求:
1.能够实现跑马灯效果(抽奖效果)
2.中奖消息轮播
3.根据后端返回抽中奖品,跑马灯跑到抽中奖品的位置

实现思路:
1.目标:将静态页面布局出来
–奖品卡片组件(基操)
–奖品池,将奖品卡片依次放入(弹性布局实现)
–中奖的奖品样式(添加属性样式)

2.目标:实现抽奖效果
–逐个改变和还原卡片的背景色,从而实现跑起来的效果
–用一个变量来告知当前卡片是否是选中的状态(变量对应样式类名)
–然后使用定时器,每隔多少毫秒使得当前卡片的背景色为正常状态,下一张卡片为选中状态(改变变量)

3.目标:使得跑马灯停到目标位置
–获取到指定奖品之后,清除定时器使得无目标跑马灯停下啦
–开启新的定时器,使跑马灯跑到指定的位置
–清除定时器

页面代码实现:

 		<View>
             <Message />//轮播消息组件
                <View className="prize-card-store">//奖池容器
                    {
   
                        this.state.dataSource.map((item, index) => {
   //讲奖品放入奖池中布局
                            return <View key={
   index} className={
   ["prize-card", item.isActive && "active"]}>//变量控制是否选中状态
                                <Image source={
   './assets/images/sweepStakes/' + item.name}></Image><