vue 實現的走馬燈

一個簽到活動的有 一個走馬燈效果。
項目基於vue的技術棧。因此只能用vue來實現了。
效果圖以下：

大體思路

經過每一個li的index值 讓其背景變色

html

<ul class="lottery" v-if="userData.activity">
    <li v-if="userData.activity" v-for="(item ,index ) in userData.activity.lottery_reward" :class="{act : index == actIndex}">   
        <span>{{userData.activity.lottery_reward[index].short_name}}</span>
    </li>
    <li class="game-btn" v-on:click.once="gameBegin">
        <p>點擊抽獎</p>
    </li>
</ul>

css

.lottery{
    height:530px;display: flex;flex-flow: row wrap;justify-content: space-between;
    padding:40px 30px;background:#fff;border-radius: 0 0 18px 18px;
    li{
        color:#333;width:130px;height: 130px;border:1px solid rgba(204,204,204,1);
        &:nth-of-type(5){
            position: relative;top:150px;
        }
        &:nth-of-type(8){
            position: relative;
            left:160px;
        }
                                 
    }
    .game-btn{
            position: relative;
            top:-150px;
            left:-160px;
            background-color:rgba(255,99,99,1);
            p{
                width:110px;
                height:110px; 
                font-size:28px;        
            }
        }
    li.act{
        background:rgba(255, 99, 99, 0.2);
        
    }
}

經過css改變每塊的位置。每塊li轉起來的下標 爲0, 1, 2, 5, 7, 4, 6, 3 。

JS

export default {
    data () {
        return {
            i:0,
            count:0,
            actIndex:0,
            circleNum : [0, 1, 2, 5, 7, 4, 6, 3],//轉動順序
        }
    },
    methods : {
        gameBegin () {
            getExpogiftLottery({activity_id:this.userData.activity.sign_activity_id}).then( res => {
               this.go();
            })              
        },
        go () {
            var EndCount = 1000;      
            setTimeout(()=>{
                this.i++;
                if(this.i >=8 ) this.i = 0;
                this.actIndex = this.circleNum[this.i];                    
                if(this.count <= EndCount) {
                    this.go()
                }else{
                    alert('開獎')
                }
            },100)
        }
    }
    
}

停到指定位置這個功能沒作，只是轉夠圈數，用戶不知道停在哪，直接跳出結果。
當點擊開始按鈕後，向服務端發送請求，請求成功後，調用go()函數（開始轉）。
每100ms actIndex 是變化的，多是[0, 1, 2, 5, 7, 4, 6, 3]中的某一個，且讓這個值做爲li的下標點亮它。