vue 版的老虎機(jī)抽獎(jiǎng)活動(dòng)效果折騰小記

前沿


最近公司有一個(gè)活動(dòng)祠饺,讓做一個(gè)老虎機(jī)抽獎(jiǎng)活動(dòng)粘咖,對(duì)于之前沒有做過的我來說還是有些吃力的邪锌,于是就開始各種網(wǎng)上找插件勉躺,發(fā)現(xiàn)大部分都是jquery的,要不就是好多一部分的觅丰,一個(gè)完整的流程都走不下來饵溅,更有甚者讓花錢買他的代碼,我就想說大家都是分享妇萄,互相交流蜕企,你們?cè)趺淳湍敲醋运剑越裉彀盐艺垓v的老虎機(jī)分享出來冠句,以來方便自己以后開發(fā)轻掩,而來大家也可以發(fā)現(xiàn)不足,指出來共同進(jìn)步懦底。


該項(xiàng)目需要雪碧圖哦

來先看看效果圖
WechatIMG10.png
代碼里邊都有注釋唇牧,比較容易上手。我用的是曲線救國(guó)的方法基茵,就是說并不完美奋构,不太靈活,雪碧圖的位置一旦確定拱层,就盡量不要?jiǎng)恿嗣志剩蝗幌麓芜€需要在重新調(diào)雪碧圖的y軸的位置,這個(gè)很煩根灯,希望看見的小伙伴給個(gè)建議径缅。

作者最近一段時(shí)間比較忙,還未將該效果抽出公共組件烙肺,后期有機(jī)會(huì)抽成公共組件纳猪,就好了。會(huì)省好多事桃笙。

好了不說廢話了氏堤,上思路,代碼搏明。

思路邏輯:老虎機(jī)抽獎(jiǎng)結(jié)果以后臺(tái)告知為準(zhǔn)鼠锈,所以前臺(tái)需要根據(jù)后臺(tái)返回的是否抽中標(biāo)示來展示相應(yīng)的效果

其實(shí)我剛開始認(rèn)為抽獎(jiǎng)結(jié)果是前端做的,然后越陷越深星著,發(fā)現(xiàn)不好做出來购笆,而且安全性不高,然后跟小伙伴交流才知道一般抽獎(jiǎng)?lì)惖幕顒?dòng)抽獎(jiǎng)結(jié)果都是由后臺(tái)告知虚循,這下就輕松多了同欠,因?yàn)槟阒恍枰鶕?jù)結(jié)果展示相應(yīng)的效果就好了样傍。

主要運(yùn)用的技術(shù)

老虎機(jī)抽獎(jiǎng)活動(dòng)運(yùn)用到了css3的transition和css3的過渡來實(shí)現(xiàn)平滑滾動(dòng)的效果,通過改變背景雪碧圖的y軸位置backgroundPositionY來展示不同的獎(jiǎng)品铺遂,以達(dá)到抽獎(jiǎng)效果衫哥。js通過定時(shí)器可以達(dá)到轉(zhuǎn)動(dòng)效果

第一步,布局

<template>
    <div id="slotMachine">
        <div class="PosRela priceCenter HomeBGColor Width100">
            <img class="Width100 Height100" src="../img/2@2x.png">
            <!-- 老虎機(jī)抽獎(jiǎng)框 -->
            <div class="PosAbso trigerCenter">
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceOne + 'rem'}"></div>
                </transition>
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceTwo + 'rem'}"></div>
                </transition>
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceThr + 'rem'}"></div>
                </transition>
            </div>
        </div>
        <!-- 前往抽獎(jiǎng)區(qū)參與活動(dòng)贏好禮襟锐! -->
        <!-- DrawToast 是封裝的公共彈窗組件 -->
        <DrawToast v-show='isGoToPrice' @fromChild="GoToPrice">
            <div class="PosRela GoToPrice" slot="luckyDrawCenter">
                <img class="Width100 Height100" src="../img/彈窗@2x (1).png">
                <div class="PosAbso Width100 Font17 FontWeight GoToPriceText">前往抽獎(jiǎng)區(qū)參與活動(dòng)贏好禮炕檩!</div>
            </div>
        </DrawToast>
        <!-- 獲得福利券彈窗 -->
        <DrawToast v-show='isGetWelfare' @fromChild="GetWelfare">
            <div class="PosRela GetWelfare" slot="luckyDrawCenter">
                <img class="Width100 Height100" src="../img/彈窗-點(diǎn)擊抽獎(jiǎng)@2x.png">
                <div class="PosAbso Width100 Font20 FontWeight constrGet">恭喜您獲得</div>
                <div class="PosAbso Width100  getVoucher">
                    <div class="getVoucherName Font24 FontWeight Ellipsis">0.8%福利券</div>
                </div>
                <div class="PosAbso Width100 Font14 PrizesIssued">獎(jiǎng)品已發(fā)放,您可在個(gè)人中心查看捌斧!</div>
                <div class="PosAbso Width100  FontWeight  commonButton CheckNow">
                    <img class="Height100" src="../img/按鈕-立即抽獎(jiǎng)@2x (1).png">
                    <div class="PosAbso Width100 Height100 Font18 ColorWhite FontWeight">立即查看</div>
                </div>
            </div>
        </DrawToast>
    </div>
</template>
<style lang="less" scoped>
//這是項(xiàng)目公共的css笛质,在本項(xiàng)目中用到的rem是2倍算法,所以要從你的設(shè)計(jì)圖尺寸乘2除以100得到捞蚂。
@import url('../../../components/tigerBaseCss/index');
.priceCenter {
    height: 4.22rem;
    border: 1px solid blue;
    .trigerCenter {
        border: 1px solid blue;
        width: 5.5rem;
        height: 3rem;
        overflow: hidden;
        left: 1rem;
        top: 0.6rem;
        border-radius: 0.1rem;
        .SpriteChart {
            width: 1.75rem;
            border: 1px solid red;
            height: 9.8rem;
            background: url("../img/choujiangzuhe.png") center center repeat-y;
            background-size: 100% 100%;
            float: left;
            margin-right: 0.1rem;
            background-attachment: scroll;
            &:nth-child(2) {}
            &:nth-child(3) {
                float: right;
                margin: 0;
            }
        }
        .down-up-translate-fade-enter-active,
        .down-up-translate-fade-leave-active {
            transition: all 0.1s;
            -webkit-transition: all 0.1s;
            -moz-transition: all 0.1s;
            -o-transition: all 0.1s;
        }
        .down-up-translate-fade-enter,
        .down-up-translate-fade-leave-active {
            opacity: 1;
        }
        .down-up-translate-fade-enter {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
        .down-up-translate-fade-leave-active {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
    }
}




//彈窗內(nèi)公共彈窗樣式
.commonButton {
    height: 0.9rem;
    div {
        top: 0;
        left: 0;
        line-height: 0.8rem;
    }
}


.GoToPrice {
    width: 5.48rem;
    height: 5.58rem;
    .GoToPriceText {
        top: 4.2rem;
        color: #DF2531;
    }
}


.GetWelfare {
    width: 5.6rem;
    height: 5.5rem;
    .constrGet {
        color: #B46C38;
        top: 1.02rem;
    }
    .getVoucher {
        top: 2.22rem;
        .getVoucherName {
            width: 3rem;
            margin: auto;
            color: #E04D4B;
        }
    }
    .PrizesIssued {
        color: #B46C38;
        top: 3rem;
    }
    .CheckNow {
        top: 3.9rem;
    }
}
</style>

第二步:邏輯

<script>
export default {
    data() {
        return {
            isGoToPrice: false, //前往抽獎(jiǎng)區(qū)參與活動(dòng)贏好禮妇押!
            isGetWelfare: false, //獲得福利券彈窗
            priceOne: 8.1, //控制滾動(dòng)圖的位置,顯示那個(gè)獎(jiǎng)品在中間的位置(需要雪碧圖)
            priceTwo: 35.44,   //也就是背景雪碧圖的y軸的位置
            priceThr: 53.02,
            textone: 0, //抽中某個(gè)獎(jiǎng)品第一列的展示的圖片姓迅,下邊倆以此類推
            texttwo: 0,
            textthe: 0,
        }
    },
    mounted() {
    },
    watch: {
        //通過監(jiān)聽第三列的圖的y軸的位置判斷中的什么獎(jiǎng)敲霍,展示該獎(jiǎng)的名字
        priceThr(newValue, olderValue) {
            const that = this;
            switch (newValue) {
                case 1181.2:   //這個(gè)模擬的中獎(jiǎng)的情況,所以彈出中獎(jiǎng)彈層
                    setTimeout(() => {
                        //控制中獎(jiǎng)彈層是否彈出
                        that.isGetWelfare = true;
                    }, 500);
                    break;
                case 1276.88:   //這個(gè)位置未中獎(jiǎng)  所以彈出很抱歉
                    setTimeout(() => {
                        that.isGoToPrice = true;
                    }, 500);
                    break;
            }
        }
    },
    methods: {
        //開始抽獎(jiǎng)
        beganDraw() {
            console.log(this.LuckyDraw);
            if (this.LuckyDraw > 0) {
                //此處需要調(diào)接口丁存,從接口里獲取是否中獎(jiǎng)肩杈,然后改變number的值,這樣就可以在this.showPrize(number);方法中設(shè)置雪碧圖的詳細(xì)位置
                let number = 7;
                this.showPrize(number);
                //該方法是通過定時(shí)器來控制雪碧圖的位置解寝,以達(dá)到轉(zhuǎn)動(dòng)的效果
                this.startDraw();
            }
        },
        startDraw() {
            this.timeone(10);
            setTimeout(() => {
                this.timetwo(0);
            }, 500);
            setTimeout(() => {
                this.timethe(0);
            }, 1000);
        },
        timeone(num) {
            var t = setInterval(() => {
                if (num <= this.textone) {
                    num += 10;
                    this.priceOne = num;
                } else {
                    clearInterval(t);
                    this.priceOne = this.textone;
                }
            }, 30);
        },
        timetwo(num) {
            var t = setInterval(() => {
                if (num <= this.texttwo) {
                    num += 10;
                    this.priceTwo = num;
                } else {
                    clearInterval(t);
                    this.priceTwo = this.texttwo;
                }
            }, 30);
        },
        timethe(num) {
            var t = setInterval(() => {
                if (num <= this.textthe) {
                    num += 10;
                    this.priceThr = num;
                } else {
                    clearInterval(t);
                    this.priceThr = this.textthe;
                }
            }, 30);
        },
        // 根據(jù)抽獎(jiǎng)信息判斷抽中的獎(jiǎng)品
        showPrize(num) {
            console.log(num);
            const that = this;
            switch (num) {
                case 1: // 抽中每個(gè)獎(jiǎng)項(xiàng)的展示圖(也就是雪碧圖的y軸的位置)扩然,需要單獨(dú)設(shè)置
                    that.textone = 1091;
                    that.texttwo = 1091;
                    that.textthe = 1091;
                    break;
                case 2: 
                    that.textone = 1112;   //這里的數(shù)值都可以設(shè)置成變量,方便控制
                    that.texttwo = 1112;
                    that.textthe = 1112;
                    break;
                case 3: 
                    that.textone = 1135;
                    that.texttwo = 1135;
                    that.textthe = 1135;
                    break;
                case 4: 
                    that.textone = 1158;
                    that.texttwo = 1158;
                    that.textthe = 1158;
                    break;
                case 5: 
                    that.textone = 1181.2;
                    that.texttwo = 1181.2;
                    that.textthe = 1181.2;
                    break;
                case 6: 
                    that.textone = 1203;
                    that.texttwo = 1203;
                    that.textthe = 1203;
                    break;
                case 7:  //若有未中獎(jiǎng)情況單獨(dú)設(shè)置一個(gè)或多個(gè)未中獎(jiǎng)的展示圖(也就是雪碧圖的y軸的位置)
                    that.textone = 1210.5;
                    that.texttwo = 1253.43;
                    that.textthe = 1276.88;
                    break;
            }
        },

    }
};
</script>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末聋伦,一起剝皮案震驚了整個(gè)濱河市夫偶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌觉增,老刑警劉巖兵拢,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異逾礁,居然都是意外死亡说铃,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門嘹履,熙熙樓的掌柜王于貴愁眉苦臉地迎上來腻扇,“玉大人,你說我怎么就攤上這事植捎⊙媒猓” “怎么了阳柔?”我有些...
    開封第一講書人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵焰枢,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng)济锄,這世上最難降的妖魔是什么暑椰? 我笑而不...
    開封第一講書人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮荐绝,結(jié)果婚禮上一汽,老公的妹妹穿的比我還像新娘。我一直安慰自己低滩,他們只是感情好召夹,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著恕沫,像睡著了一般监憎。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上婶溯,一...
    開封第一講書人閱讀 52,874評(píng)論 1 314
  • 那天鲸阔,我揣著相機(jī)與錄音,去河邊找鬼迄委。 笑死褐筛,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的叙身。 我是一名探鬼主播渔扎,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼信轿!你這毒婦竟也來了赞警?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤虏两,失蹤者是張志新(化名)和其女友劉穎愧旦,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體定罢,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡笤虫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了祖凫。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片琼蚯。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖惠况,靈堂內(nèi)的尸體忽然破棺而出遭庶,到底是詐尸還是另有隱情,我是刑警寧澤稠屠,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布峦睡,位于F島的核電站翎苫,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏榨了。R本人自食惡果不足惜煎谍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望龙屉。 院中可真熱鬧呐粘,春花似錦、人聲如沸转捕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)五芝。三九已至鳍咱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間与柑,已是汗流浹背谤辜。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留价捧,地道東北人丑念。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像结蟋,于是被迫代替她去往敵國(guó)和親脯倚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容