微信小程序-九宫格抽奖

效果图
（ps:自己随便搭的UI，看起来有点单调.假装有动图)

脑补我会动

以下为代码部分：

.wxml
我的项目需求是以弹窗的形式出来，所以就写成这个样子了，不是一个单独的页面，{{animateType*}}，我主要是想在抽到目标奖品的时候，给目标一个动画，看起来不至于太过于死板，需要说的是开始按钮下面其实是有四个框的，只不过我修改了透明度opacity=0。此外通过修改每个奖品框的内边框的大小{{prizesborderW*}}，看起来像有个框在来回动

<!--九宫格抽奖  -->
<view wx:if='{{ishowPrizesView}}' class='coverBg'>
  <view class='prizesContainer'>

<view class="{{animateType0}} prizesCell" style="opacity:1;border-width: {{prizesborderW0}}rpx;">{{prizesArray[0]}}</view>
<view class="{{animateType1}} prizesCell" style="opacity:1;border-width: {{prizesborderW1}}rpx;">{{prizesArray[1]}}</view>
<view class="{{animateType2}} prizesCell" style="opacity:1;border-width: {{prizesborderW2}}rpx;">{{prizesArray[2]}}</view>
<view class="{{animateType3}} prizesCell" style="opacity:1;border-width: {{prizesborderW3}}rpx;">{{prizesArray[3]}}</view>
<view class="{{animateType4}} prizesCell" style="opacity:1;border-width: {{prizesborderW4}}rpx;">{{prizesArray[4]}}</view>
<view class="{{animateType5}} prizesCell" style="opacity:0;border-width: {{prizesborderW5}}rpx;">{{prizesArray[5]}}</view>
<view class="{{animateType6}} prizesCell" style="opacity:0;border-width: {{prizesborderW6}}rpx;">{{prizesArray[6]}}</view>
<view class="{{animateType7}} prizesCell" style="opacity:1;border-width: {{prizesborderW7}}rpx;">{{prizesArray[7]}}</view>
<view class="{{animateType8}} prizesCell" style="opacity:1;border-width: {{prizesborderW8}}rpx;">{{prizesArray[8]}}</view>
<view class="{{animateType9}} prizesCell" style="opacity:0;border-width: {{prizesborderW9}}rpx;">{{prizesArray[9]}}</view>
<view class="{{animateType10}} prizesCell" style="opacity:0;border-width: {{prizesborderW10}}rpx;">{{prizesArray[10]}}</view>
<view class="{{animateType11}} prizesCell" style="opacity:1;border-width: {{prizesborderW11}}rpx;">{{prizesArray[11]}}</view>
<view class="{{animateType12}} prizesCell" style="opacity:1;border-width: {{prizesborderW12}}rpx;">{{prizesArray[12]}}</view>
<view class="{{animateType13}} prizesCell" style="opacity:1;border-width: {{prizesborderW13}}rpx;">{{prizesArray[13]}}</view>
<view class="{{animateType14}} prizesCell" style="opacity:1;border-width: {{prizesborderW14}}rpx;">{{prizesArray[14]}}</view>
<view class="{{animateType15}} prizesCell" style="opacity:1;border-width: {{prizesborderW15}}rpx;">{{prizesArray[15]}}</view>

<view class='prizesStartBtn' catchtap='clickPrizesStartBtn'>开始</view>

  </view>
</view>

我刚开始用的循环，界面很快就搭出来了，but，遇到小程序的坑了，没办法去动态给类增加变量，就导致后续取不到要修改的值，只能通过这种数据绑定的形式，修改，看起来繁琐极了，╮(╯_╰)╭

.wxss
九宫格UI布局，以为是以弹窗的形式进行表现的，所以使用了position: fixed;进行固定位置,coverBg为弹窗的半透明的遮罩

.coverBg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
}
.prizesCell {
  width: 160rpx;
  height: 160rpx;
  background-color: white;
  margin-top: 20rpx;
  font-size: 23rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border:0 solid green; 
}

.prizesContainer {
  top: 215rpx;
  background-color: orange;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  position: fixed;
  left: 10rpx;
  right: 10rpx;
  padding-bottom: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
}

.prizesStartBtn {
  width: 200rpx;
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background: linear-gradient(white, #3D55AE);
  border: 10rpx solid white;
  border-radius: 200rpx;
  color: white;
  font-weight: bold;
}

.js

var i = -1 //定义一个全局的抽奖的序号

data:{
    // 是否显示九宫格抽奖
    ishowPrizesView:true,
    // 奖品数组
    prizesArray:['升级书_0','1.5倍经验卡_1','200金币_2','100金币_3',
                '金库碎片_4', '补位_5', '补位_6','100经验_7',
                '2倍经验卡_8', '补位_9', '补位_10','升级书_11',
                '2倍金币卡_12', '1.5倍金币卡_13', '200经验_14','100金币_15'],
    // 九宫格抽奖滚动的下标顺序数组(按照这个顺序进行滚动)
    prizesflowArray: [0, 1, 2, 3, 7, 11, 15, 14, 13, 12, 8, 4],
}

  // 点击抽奖按钮
  clickPrizesStartBtn: function () {

    // 随机出奖品的下标位置
    var prizesNo = parseInt(11 * Math.random()); //0-11之间整数
    var prizesIndex = this.data.prizesflowArray[prizesNo]
    var prizesName = this.data.prizesArray[prizesIndex]
    console.log('开始抽奖========' + prizesName + '=====' + prizesIndex)
    //抽奖动画
    var that = this
    var timer1 = setInterval(function () {
      that.animatedPrizesfind(false)
    }, 80)
    var timer2
    setTimeout(function () {
      clearInterval(timer1)
      timer2 = setInterval(function () {
        that.animatedPrizesfind(false)
      }, 30)
    }, 500)
    var timer3
    setTimeout(function () {
      clearInterval(timer2)
      timer3 = setInterval(function () {
        that.animatedPrizesfind(false)
      }, 100)
    }, 2000)
    var timer4
    setTimeout(function () {
      clearInterval(timer3)
      timer4 = setInterval(function () {
        that.animatedPrizesfind(false)
      }, 300)
    }, 4000)
    var timer5
    setTimeout(function () {
      clearInterval(timer4)
      timer5 = setInterval(function () {
        that.animatedPrizesfind(true, function (e) {
          if (e === prizesIndex) {
            clearInterval(timer5)
            console.log('找到指定奖品==' + e)
            var prizesPar = {}
            prizesPar['animateType' + e] = 'animated tada'
            that.setData(prizesPar)
            setTimeout(function () {
              wx.showModal({
                title: '中奖啦',
                content: '恭喜获得【' + prizesName + '】',
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    console.log('用户点击确定,领取抽到的奖品')
                    that.setData({
                      ishowPrizesView: false
                    })
                  }
                }
              })
            }, 1000)

          }
        })
      }, 600)
    }, 5000)
  },
  animatedPrizesfind: function (isFindPrizes, callback) {
    // var that = this
    var lastprizesIndex
    if (i === -1) {
      lastprizesIndex = this.data.prizesflowArray[this.data.prizesflowArray.length - 1]
    } else {
      lastprizesIndex = this.data.prizesflowArray[i]
    }

    i++
    var prizesIndex = this.data.prizesflowArray[i]
    var par = {}
    par['prizesborderW' + prizesIndex] = 10
    par['prizesborderW' + lastprizesIndex] = 0
    this.setData(par)
    if (i === this.data.prizesflowArray.length - 1) {
      i = -1
    }

    if (isFindPrizes) {
      callback(prizesIndex)
    }

  },

                        完>>》》     >>》》     >>》》 

我爱你，别为了不属于你的观众演绎你不擅长的人生，反正，谢幕后的每次相逢都有我捧着鲜花把你拥入怀中。

                       《《<<      《《<<      《《<<结