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

今天小编给大家分享一下微信小程序如何实现走马灯式抽奖的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

先来看下效果

设置奖项

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;
}

以上就是“微信小程序如何实现走马灯式抽奖”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。