抽奖转盘实现 ( vue + js + html + less ) - 简书

安宇雨 - 随手采集
2019-01-02 22:44:28
随手采集
0000-未整理-等待研究

书写文章起因

活动策划人员策划这个抽奖页面，用于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 );
        }
    }
};