動策劃人員策劃這個抽獎頁面，用于app內。

當時，這個轉盤布局我踩坑了，我本以為這么簡單的布局應該不用絕對定位的，是我想多了！然后改為絕對定位來實現，因為要簡單些。

抽獎轉盤

一、九個格子和開始按鈕，頁面布局的實現思路

這個用絕對定位，小格子相對于大轉盤定位，這個我就給個簡單例子就好了哈，我相信你們能懂起的，如果沒理解到我再詳說。

標注

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

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

二、轉動效果實現：（下面貼出vue文件的html和js代碼，css代碼沒有。因為全貼出來太多了，如果想看詳細代碼，就到我的github倉庫去觀看或者下載）

轉動前.png

轉動后.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: [ // 獎品數組
 { 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(){
 // 請求接口, 這里我就模擬請求后的數據(請求時間為2s)
 setTimeout( () => {
 this.award = {
 id: '4',
 name: '笨驢',
 };
 }, 2000 );
 this.move();
 },
 move(){
 window.timeout = setTimeout( () => {
 this.current++;
 if ( this.current > 7 ) {
 this.current = 0;
 }
 // 若抽中的獎品id存在，則開始減速轉動
 if ( this.award.id && ( Date.now() - this.time ) / 1000 > 2 ) {
 this.speed += this.diff; // 轉動減速
 // 若轉動時間超過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;
 }
 // 若抽中的獎品不存在，則加速轉動
 } else {
 this.speed -= this.diff; // 轉動加速
 }
 this.move();
 }, this.speed );
 }
 }
};

結尾發言

如果沒有理解到，可以留言問我哈。這是我專門寫的小demo，希望能幫到大家。謝謝！

代碼倉庫地址：https://github.com/lingziyb/get-award