vue 數字上下滾動抽獎

本章節分享一段程式碼例項，它實現了數字抽獎效果。

程式碼例項如下:

<div class="start_draw">
    <div class="wrap">
        <div class="numw" v-for="(item,n) in numArrList" :key="n">
            <ul :style="item">
              <li v-for="(num,index) in numArr" :key="index">{{num}}</li>
            </ul>
        </div>
    </div>
    <div class="draw_btn_bar" v-if="drawBtnStatus === 0" @click="drawNow()">{{running === 0? '點選抽獎': '停'}}</div>
</div>

<script>
data() {
    return {
        numArrList: ['firstStyle','secondStyle','thirdStyle','fourStyle'],//抽獎碼樣式集合
        numbers: [0,1,2,3,4,5,6,7,8,9],
        numArr: [] //單個抽獎碼數字陣列
    }
}

methods: {
      //點選開始抽獎
      drawNow(){
        let _this = this;
        let userName = this.globalData.userInfo.nickName;
        let userIcon = this.globalData.userInfo.avatarUrl;
        if(_this.running === 0)//未執行時
        {
            //無限迴圈數字滾動效果
            _this.numArrList[0] = "-webkit-animation: circle1 2s linear infinite;";
            _this.numArrList[1] = "-webkit-animation: circle2 2s linear infinite;";
            _this.numArrList[2] = "-webkit-animation: circle3 2s linear infinite;";
            _this.numArrList[3] = "-webkit-animation: circle4 2s linear infinite;";
            _this.running++;
        }else{
            //取消轉動效果
            this.$fly.post(startDraw,{id: 1,name: userName,head: userIcon}).then(res => {
              if(res.suc === 0) {  //抽獎成功
                var str = Math.round(Math.random() * 10000).toString();
                if (str.length === 1) {
                 str = "000" + str;
                }
                if (str.length === 2) {
                 str = "00" + str;
                }
                if (str.length === 3) {
                  str = "0" + str;
                }
                console.log(str);
                let luckstr = str;
                let arr = luckstr.split("");
                //let arr = String(res.data.num).split("");
                _this.numArrList[0] = "animation: circle 3s ease-out;margin-top:" + (-196 * (Number(arr[0]))) + "rpx";
                _this.numArrList[1] = "animation: circle 2s ease-out;margin-top:" + (-196 * (Number(arr[1]))) + "rpx";
                _this.numArrList[2] = "animation: circle 1s ease-out;margin-top:" + (-196 * (Number(arr[2]))) + "rpx";
                _this.numArrList[3] = "animation: circle 0s ease-out;margin-top:" + (-196 * (Number(arr[3]))) + "rpx";
            
                _this.drawBtnStatus = 1;
              } else if(res.suc === 1){ //活動參與人數已滿
                _this.numArrList[0] = "margin-top: 0";
                _this.numArrList[1] = "margin-top: 0";
                _this.numArrList[2] = "margin-top: 0";
                _this.numArrList[3] = "margin-top: 0";
                _this.drawBtnStatus = 1;
              }
              _this.running = 0;
            }).catch(err => {
             
            })
          }
        }
      }
    },
    
    onReady(){
      //初始抽獎數字陣列
      for(var i = 0;i<5;i++){
        for(var j = 0;j<this.numbers.length;j++){
          this.numArr.push(this.numbers[j]);
        }
      }
    },
</script>

<style scoped>
.start_draw{
    min-height: 520rpx;
    padding: 30rpx 10rpx;
    margin: 50rpx 60rpx;
    border-radius: 10rpx;
    background-image: -webkit-linear-gradient(top, #29D0A2, #2A90DA);
  }
  .wrap{
    margin: 20rpx auto;
  }
  .numw{
    width: 25%;
    height: 196rpx;
    line-height: 196rpx;
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
    display: inline-block;
    transition: all 0.5s;
    transition-delay: 2s;
  }
  .numw ul{
    padding: 0 16rpx;
  }
  .numw li{
    float: left;
    width: 100%;
    height: 196rpx;
    line-height: 196rpx;
    text-align: center;
    background: #89D8E7;
    font-size:100rpx;
  }
  .noBindText{
    text-align: center;
  }
  @-webkit-keyframes circle {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-980px);
    }
  }
  @-webkit-keyframes circle1 {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-980px);
    }
  }
  @-webkit-keyframes circle2 {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-1500px);
    }
  }
  @-webkit-keyframes circle3 {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-2000px);
    }
  }
  @-webkit-keyframes circle4 {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-2500px);
    }
  }
</style>
複製程式碼

結語

上面程式碼實現了抽獎效果，實現原理其實非常簡單，就是利用javascript操作css3相關屬性。