微信小程序实现走马灯式抽奖

本文实例为大家分享了微信小程序实现走马灯式抽奖的具体代码，供大家参考，具体内容如下

先来看下效果

设置奖项

awardList是从后台拿到的奖项数组，list不够八位时填充谢谢参与奖项，超过八位时截取数组，然后随机打乱数组，保证奖项随机布局，第四位固定填充立即抽奖按钮

// 设置奖项
  settingAward(awardList) {
    const len = awardList.length;
    const award = {
      awardName: '谢谢参与',
      awardMoney: 0,
      awardType: '00',
      awardCode: ''
    };
    let _awardList = [];
    if (len < 8) {
      for (let i = 0; i < 8 - len; i++) {
        awardList.push(JSON.parse(JSON.stringify(award)));
      }
      this.randArr(awardList);
      _awardList = awardList;
      console.log(_awardList)
    } else if (awardList.length == 8) _awardList = awardList;
    else {
      _awardList = awardList.splice(0, 9);
    }
    _awardList.splice(4, 0, {
      awardName: '立即抽奖'
    })
    return _awardList;
  },

  // 随机打乱奖项
  randArr(arr) {
    for (var i = 0; i < arr.length; i++) {
      var iRand = parseInt(arr.length * Math.random());
      var temp = arr[i];
      arr[i] = arr[iRand];
      arr[iRand] = temp;
    }
    return arr;
  }

布局

主要用了flex布局，遍历奖品list，index==4时渲染立即抽奖按钮，否则渲染奖项

<view class="content">
      <view wx:for="{{awardList}}">
        <view wx:if="{{index == 4}}" class="award">
          <view wx:if="{{activityCount > 0}}" class="btn {{lucking ? 'lucking' : 'lucked'}}">
            <text class="btn_text" catchtap="startLuck">{{item.awardName}}</text>
          </view>
          <view wx:else class="btn lucking">
            <text class="btn_text">{{item.awardName}}</text>
          </view>
        </view>
        <view wx:else class="award {{currentIndex == index ? 'selected' : 'unselected'}}">
          <block wx:if="{{item.awardType == '00'}}">
            <view class="option">
              <image src="../../img/noluck_icon.png"></image>
            </view>
            <view class="txt">{{item.awardName}}</view>
          </block>
          <block wx:elif="{{item.awardType == '07'}}">
            <view class="option">
              <image src="../../img/mianxi_icon.png"></image>
            </view>
            <view class="txt">{{item.awardName}}</view>
          </block>
          <block wx:else>
            <view class="option">
              <image src="../../img/turntable_redpacket.png"></image>
              <text class="price">{{util.formatMoney(item.awardMoney)}}</text>
            </view>
            <view class="txt">{{item.awardName}}</view>
          </block>
        </view>
      </view>
</view>

抽奖逻辑

开始抽奖时默认选中第一个，初始化idArr为currentIndex的索引，即下一个奖项在哪激活
记录圈数let cycles = 0;
开始设置interval = setInterval(frame, 100);
index == 8时轮询了一圈，cycles加一
当cycles > 2时减速定时器interval = setInterval(frame, 300);
当抽奖接口有结果且转了三圈后跳到获奖位置，清除定时器并弹出获奖结果弹窗

// 开始抽奖
  startLuck() {
      const idArr = [0, 1, 2, 5, 8, 7, 6, 3];
    let cycles = 0;
    let that = this;
    let _awardList = this.data.awardList;
    let index = this.data.currentIndex;
    let activityCount = this.data.activityCount - 1;
    var interval = setInterval(frame, 100);
    this.setData({
      lucking: true,
      activityCount
    })
    let pending = true;
    post('122201.app', {
      duration: 2000,
      activityCode: this.data.activityCode
    }, {
      isMarket: true
    }).then(res => {
      pending = false;
      this.setData({
        awardResult: {
          awardCode: "",
          ...res
        }
      })
    }).catch(err => {
      clearInterval(interval);
      pending = false;
      activityCount += 1;
      this.setData({
        activityCount,
        lucking: false,
      })
    })

    function frame() {
      if (!pending) {
        // 转三圈后跳到获奖位置
        if (cycles > 3) {
          if (_awardList[that.data.currentIndex].awardCode == that.data.awardResult.awardCode) {
            clearInterval(interval);
            that.setData({
              lucking: false,
              showModal: true
            })
            return;
          }
        }
      }
      if (index == 8) {
        index = 0;
        if (!pending) {
          // 两圈后转盘减速
          if (cycles++ > 1) {
            clearInterval(interval);
            interval = setInterval(frame, 300);
          }
        }
      }
      // 设置奖项跳到对应位置
      that.setData({
        currentIndex: idArr[index++]
      })
    }
  },

wxss

.turntable .content {
  width: 568rpx;
  height: 568rpx;
  background: #F48002;
  border-radius: 20px;
  position: absolute;
  top: 90rpx;
  left: 30rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 10rpx;
  box-sizing: border-box;
}

.turntable .content .award {
  width: 174rpx;
  height: 174rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。