實現(xiàn)效果為下面圖片樣子
lAHPD4d8p5ws18jNBobNAu4_750_1670.gif
因為代碼太多，所以只說九宮格以及跑馬燈的內(nèi)容實現(xiàn)
整體的思路是低葫，后臺返回我們獎品的數(shù)組详羡，數(shù)組中主要包括每個獎品的信息，其中有index,我們通過這個index我們來判斷后臺返回抽中的獎品與獎品列表對應(yīng)上嘿悬，然后通過一個current來和index對應(yīng)实柠，來顯示抽中的是哪一個，通過speed來控制抽時轉(zhuǎn)圈的速度善涨。
首先說html代碼結(jié)構(gòu)窒盐，我們直接上代碼
<!--
* @Description:
* @Author: @[lina]
* @Date: 2020-07-17 13:53:06
* @LastEditors: @[lina]
* @LastEditTime: 2020-07-21 16:33:17
-->
<div class="draw_box">
<!--drawPrizes是獎品數(shù)組，其中包含獎品下標(biāo)钢拧、名稱等信息-->
<div class="item" v-for="(draw,index) in drawPrizes" :class="['item'+index,{'active':index === current}]" :key="draw.prizeIndex">
<div class="img" v-if="draw.prizeImgUrl"><img :src="draw.prizeImgUrl"></div>
<div class="name">{{draw.title}}</div>
</div>
<div class="start" :class="{'active' : !isActive}" @click="start">
<div class="start_btn">立即抽獎</div>
<div class="start_num">今日剩余0次</div>
</div>
</div>
然后我們說這個css跑馬燈的效果蟹漓，這個圖片需要注意，一定要是兩種燈狀態(tài)的兩張圖片
<!--
* @Description:
* @Author: @[lina]
* @Date: 2020-07-17 13:53:06
* @LastEditors: @[lina]
* @LastEditTime: 2020-07-21 16:33:17
-->
.draw_box{
position relative
width 656px
height 668px
background-repeat no-repeat
background-size 100% 100%
animation changeBg .5s ease infinite
}
@keyframes changeBg{
0%{background-image:url(../../assets/img/draw/sk1.png)}
100%{background-image:url(../../assets/img/draw/sk2.png)}
}
九宮格的布局就非常的簡單了源内，通過postion:absolute和left葡粒、top去改變
中間開始按鈕的不同狀態(tài)（抽獎機會、無抽獎機會）
.start{
position absolute
width 184px
height 188px
background-image url('../../assets/img/draw/picked.png')
background-repeat no-repeat
background-position center center
background-size cover
display flex
flex-direction column
align-items center
justify-content flex-end
&.active{
background-image url('../../assets/img/draw/disable_picked.png')
.start_btn,.start_num{
opacity 0.4
}
}
.start_btn{
width 114px
line-height 53px
font-size 52px
color #fff
letter-spacing 3px
font-weight 500
}
.start_num{
font-size 20px
color #FCF1CE
font-weight 500
letter-spacing 1px
margin-bottom 14px
}
}
九宮格：
.item{
position absolute
width 184px
height 188px
background-image url('../../assets/img/draw/no_picked.png')
background-repeat no-repeat
background-position center center
background-size cover
display flex
flex-direction column
align-items center
justify-content center
&.active{
background-image url('../../assets/img/draw/picked.png')
.name{
color #fff
}
}
.img{
max-width 87px
max-height 67px
img{
width 100%
height 100%
}
}
.name{
color #83221D
}
}
.item0,.item1,.item2{
top 46px
}
.item4,.item5,.item6{
bottom 48px
}
.item3,.item7,.start{
top 238px
}
.item0,.item7,.item6{
left 48px
}
.item2,.item3,.item4{
right 48px
}
.item1,.item5,.start{
left 238px
}
}
然后是js代碼膜钓，邏輯就是通過setTimeout來控制時間塔鳍，通過current來判斷是第幾個獎品
<!--
* @Description:
* @Author: @[lina]
* @Date: 2020-07-17 13:53:06
* @LastEditors: @[lina]
* @LastEditTime: 2020-07-21 16:33:17
-->
start () {
// 每次抽完獎后，再次抽獎時呻此，初始化
this.time = Date.now()
this.current = 0
this.speed = 200
this.biginDraw()
},
biginDraw () {
// 請求接口
setTimeout(() => {
this.drawPrize = {
title: '15元優(yōu)惠券', // 獎品信息
prizeIndex: 6, // 獎品編號
prizeImgUrl: '@img/img/draw/card.png'
}
}, 2000)
this.move()
},
move () {
const _this = this
window.timeout = setTimeout(() => {
++_this.current
if (_this.current > 7) {
_this.current = 0
}
// 若抽中的獎品index存在，那么轉(zhuǎn)圈圈的速度減慢
if (_this.drawPrize.prizeIndex && (Date.now() - _this.time) / 1000 > 2) {
_this.speed += _this.diff // 轉(zhuǎn)動減速
if (_this.drawPrize.prizeIndex === _this.drawPrizes[_this.current].prizeIndex && (Date.now() - _this.time > 6)) {
clearTimeout(window.timeout)
setTimeout(() => {
// 輸出抽獎結(jié)果
console.log(_this.drawPrize.title)
}, 0)
return false
}
} else {
// 若抽中獎品不存在腔寡，那么轉(zhuǎn)圈圈的速度加速
_this.speed -= _this.diff
}
_this.move()
}, _this.speed)
}
}
