書寫文章起因

活動策劃人員策劃這個抽獎頁面，用于app內(nèi)栈拖。
當時连舍，這個轉(zhuǎn)盤布局我踩坑了，我本以為這么簡單的布局應該不用絕對定位的涩哟，是我想多了索赏！然后改為絕對定位來實現(xiàn)，因為要簡單些贴彼。

抽獎轉(zhuǎn)盤

一潜腻、九個格子和開始按鈕，頁面布局的實現(xiàn)思路

這個用絕對定位锻弓，小格子相對于大轉(zhuǎn)盤定位砾赔，這個我就給個簡單例子就好了哈，我相信你們能懂起的，如果沒理解到我再詳說暴心。

標注

如上圖所示妓盲，大框為父容器，九個小格子為子容器

<div class="parent">
    <div class="child child1"></div> 
    <div class="child child2"></div> 
    <div class="child child3"></div> 
    .......
    <div class="child child9" id="start"></div> 
</div>

<style>
    .parent{
        position: relative;

        .child{
             position: absolute;
        }
        .child1{
            top: 0;
            left: 0;
        }
        ......
       .active{
            background-color: darkgoldenrod;
       }
    }
</style>

二专普、轉(zhuǎn)動效果實現(xiàn)：（下面貼出vue文件的html和js代碼悯衬，css代碼沒有。因為全貼出來太多了檀夹，如果想看詳細代碼筋粗，就到我的github倉庫去觀看或者下載）

轉(zhuǎn)動前.png

轉(zhuǎn)動后.png

app.vue

// template
<template>
    <div id="rotary-table">
        <div class="award" v-for="(award,index) in awards" :class="['award'+index,{'active': index==current}]">
            {{award.name}}
        </div>
        <div id="start-btn" @click="start">開始</div>
    </div>
</template>

// js
export default {
    name: 'get-award',
    data() {
        return {
            current: 0,  
            awards: [  // 獎品數(shù)組
                { id: 1, name: '空' },
                { id: 2, name: '眼鏡' },
                { id: 3, name: '包' },
                { id: 4, name: '笨驢' },
                { id: 5, name: '書' },
                { id: 6, name: '手鏈' },
                { id: 7, name: '美女' },
                { id: 8, name: 'iphone' }
            ],
            speed: 200,   // 速度
            diff: 15,   // 速度增加的值
            award: {},   // 抽中的獎品
            time: 0   // 記錄開始抽獎時的時間
        };
    },
    methods: {
        start(){
            // 開始抽獎
            this.drawAward();
            this.time = Date.now();
            this.speed = 200;
            this.diff = 15;
        },
        drawAward(){
            // 請求接口, 這里我就模擬請求后的數(shù)據(jù)(請求時間為2s)
            setTimeout( () => {
                this.award = {
                    id: '4',
                    name: '笨驢',
                };
            }, 2000 );
            this.move();
        },
        move(){
            window.timeout = setTimeout( () => {
                this.current++;
                if ( this.current > 7 ) {
                    this.current = 0;
                }

                // 若抽中的獎品id存在，則開始減速轉(zhuǎn)動
                if ( this.award.id && ( Date.now() - this.time ) / 1000 > 2 ) {
                    this.speed += this.diff;   // 轉(zhuǎn)動減速

                    // 若轉(zhuǎn)動時間超過4秒炸渡，并且獎品id等于小格子的獎品id桨昙，則停下來！
                    if ( ( Date.now() - this.time ) / 1000 > 4 && this.award.id == this.awards[ this.current ].id ) {
                        clearTimeout( window.timeout );
                        setTimeout( () => {
                            alert( this.award.name );
                        }, 0 );
                        return;
                    }

                // 若抽中的獎品不存在桃焕，則加速轉(zhuǎn)動
                } else {
                    this.speed -= this.diff;   // 轉(zhuǎn)動加速
                }

                this.move();
            }, this.speed );
        }
    }
};

結(jié)尾發(fā)言

如果沒有理解到契沫，可以留言問我哈。這是我專門寫的小demo吼畏，希望能幫到大家督赤。謝謝！
代碼倉庫地址：https://github.com/lingziyb/get-award