微信小程序如何實現走馬燈式抽獎

今天小編給大家分享一下微信小程序如何實現走馬燈式抽獎的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

先來看下效果

設置獎項

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

以上就是“微信小程序如何實現走馬燈式抽獎”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。