近期使用vue開發了一個抽獎活動頁面，以下代碼塊為該功能的所有代碼，里面有詳細的代碼注釋，有需要的伙伴可根據自己的業務需求做相應調整，效果圖放置最底部， 廢話不多數直接上代碼→

HTML部分 <template><div class="luck-rotary" :style="{marginTop:`${statusBarHeight}px`}"><div class="title-bar flex" :style="{paddingTop:`${statusBarHeight}px`}"><div class="icon-back" @click="goBack()"><img src="../../assets/back-icon.png" alt="" /></div><p class="nav-tit">土豪大作戰</p></div><header class="header"><span class="router-btn active-rule" @click="activityRule()"></span><span class="router-btn prize-rule" @click="prizeRecord()"></span></header><div class="main" :style="{'height':screenH/100+'rem'}"><div class="draw-box"><van-notice-bar left-icon="volume-o" color="#ffffff" :scrollable="false"><van-swipeverticalclass="notice-swipe":autoplay="3000":show-indicators="false"><van-swipe-item v-for="item in noticeList"><span class="coin-color">{{formatName(item.userNickName)}}</span>獲得{{item.lotteryName}}<span class="coin-color">{{item.lotteryType == 1?'價值':'獲得'}}{{item.lotteryDesc}}</span></van-swipe-item></van-swipe></van-notice-bar><img :src='lampUrl' alt="" id="lampIcon"><div class="prize-list"><div class="line_item" id="tuHao" @click="goBuyTicket()"><span>{{ticketsSum}}張</span></div><template v-for="(item,index) in prizesList"><div class="line_item position":class="[{ active: index == current }]" :id="'item'+(index+1)"><div class="gift-icon"><img :src="item.lotteryIcon" alt=""><img :src="item.daysIcon" class="noble-icon" alt="" v-if="item.daysIcon"><span class="coin-num" v-if="item.id !== 123">{{item.valueDescribe}}</span><span class="prize-name" :class="item.id == 123 ? 'noble-color':''">{{item.name}}</span><div :class="bgSwitch ? 'bg-color':''"></div></div></div></template></div><div class="draw-btn flex"><span class="roll1 roll-bg" @click="luckDraw(1)"></span><span class="roll10 roll-bg" @click="luckDraw(10)"></span></div><div class="exchange-times"><em class="star-flag">*</em>已兌換{{lotteryPrizeTimes}}次,累計兌換168次必中<span class="noble-prize">貴族大獎</span></div></div><div class="lucky-list"><ul class="title-list flex"><li class="title-item"><b>排名</b></li><li class="title-item"><b>用戶</b></li><li class="title-item"><b>獎勵</b></li></ul><div class="list-box"><ul class="user-list"><li class="list-item flex" v-for="(item,index) in luckyList" :key="index"><span class="rank-num">{{rankIndex(index)}}</span><div class="user-info flex"><img :src="item.userIcon" alt=""><span class="nick-name">{{item.userNickName}}</span></div><div class="prizes-info flex"><div class="gift-box"><img :src="item.prizeIcon" alt=""></div><span class="gift-name">{{item.lotteryName}}</span></div></li><footer class="footer"><p class="txt">沒有更多了哦~</p><p class="txt">只保留近30天的排名哦~</p></footer></ul></div></div></div><!--抽一次獎品的彈窗--><van-overlay :show="showOneOverlay" :lock-scroll="true"><div class="wrapper flex" v-for="item in giftList"><div class="draw-once"><div class="gift-box-pop"><p class="gift-desc-pop">恭喜你獲得</p><p class="gift-name-pop">{{hasNobleGift ? prizeName : item.lotteryPrizeView.name}}</p><img src="../../assets/luckDraw-icon/light-icon.png" alt="" class="light-icon"><div class="gift-icon-pop"><img :src="hasNobleGift ? noblePrizeIcon : item.lotteryPrizeView.prizeIcon" alt=""></div><div class="gift-value">{{item.lotteryPrizeView.type == 1 ? '價值' : '' }}{{hasNobleGift ? prizeVal : item.lotteryPrizeView.valueDescribe}}</div></div><div class="get-gift" @click="luckDraw(1)">再抽一次</div><p class="gift-tips">禮物在您的背包里查看</p><span class="close-btn" @click="closePop(1)"></span></div></div></van-overlay><!--抽十次獎品的彈窗--><van-overlay :show="showTenOverlay" :lock-scroll="true"><div class="wrapper flex"><div class="draw-ten"><div class="gift-box-ten"><p class="gift-desc-ten">恭喜你獲得</p><ul class="gift-list flex" :class="giftList.length > 4? 'flex-start' : ''"><li class="gift-item" :class="giftList.length == 4 || giftList.length >= 7? 'margin' : ''"v-for="(item,index) in giftList" :key="index"><img :src="`${numUrl}num${item.lotteryPrizeCount}.png`" alt="" class="num-icon"><div class="gift-icon-ten":class="giftList.length == 4 || giftList.length >= 7? 'gift-icon-little':''"><img :src="item.lotteryNoblePrizeView.prizeIcon" alt="" v-if="item.lotteryNoblePrizeView"><img :src="item.lotteryPrizeView.prizeIcon" alt="" v-else></div><p class="gift-name-ten">{{item.lotteryNoblePrizeView ? item.lotteryNoblePrizeView.name : item.lotteryPrizeView.name}}</p><div class="gift-value-ten" v-if="item.id !== 123":class="giftList.length == 4 || giftList.length >= 7? 'gift-value-little':''">{{item.lotteryPrizeView.type == 1 ? '價值' : '' }}{{item.lotteryPrizeView.valueDescribe}}</div><div class="gift-value-ten" v-else:class="giftList.length == 4 || giftList.length >= 7? 'gift-value-little':''">獲取驚喜大獎</div></li></ul></div><div class="get-gift get-gift-ten" @click="luckDraw(10)">再抽一次</div><p class="gift-tips">禮物在您的背包里查看</p><span class="close-btn" @click="closePop(10)"></span></div></div></van-overlay><buyTicket :show.sync="showBuyTicket" :ticketSource="ticketSource" :currentIndex="currentIndex" @buyTicket="buyTicket"></buyTicket><drawRule :showRule.sync="showRule"></drawRule><drawRecord :showRecord.sync="showRecord" ref="recordChild"></drawRecord></div> </template> JS部分 <script>import Vue from "vue";import { NoticeBar,Overlay } from 'vant';import { initRouletteLottery,getLuckyRank,lottery } from "../../config/api"; //接口import { buyTicket,drawRule,drawRecord } from "../../components";import {getStatusBarHeight, goBack} from "../../static/js/clientUntils"; //組件Vue.use(NoticeBar).use(Overlay);export default {components: {buyTicket,drawRule,drawRecord},data() {return {screenH: window.screen.height, // 獲取手機屏幕高度statusBarHeight: getStatusBarHeight(), // 狀態欄高度showOneOverlay: false, // 一連抽遮罩層showTenOverlay: false, // 十連抽遮罩showBuyTicket: false, // 購買抽獎券彈窗showRule: false, // 活動規則showRecord: false, // 中獎紀錄bgSwitch: false, // 抽獎時的遮罩開關ticketSource: 0, // 埋點-獎券來源 1抽一次觸發 2抽十次觸發 3金幣兌換ticketsSum: 0, // 土豪券余額currentIndex: 0, // 當剩余券<10張時，且點擊十連抽時，默認選中10張的選項drawTimes: 1, // 點擊的抽獎次數是1連抽還是10連抽lotteryPrizeTimes: 0, // 已兌換次數prizesList: [], // 獎品列表noticeList: [], // 通知欄列表luckyList: [], // 幸運榜單current: 0, // 當前索引值speed: 150, // 時間->速度diff: 7, // 基數 基數越小轉速越慢giftId: 172, // 抽中獎品的idtime: 0, // 當前時間戳timer: null, // 定時器giftList: [],// 抽中的獎品prizeName: '', // 抽中貴族大禮包的nameprizeVal: '', // 抽中貴族大禮包的價值noblePrizeIcon: '', // 抽中貴族大禮包的圖標lampTimer: null,isRolling: true, // 上一輪抽獎是否完成的標識hasNobleGift: false, // 是否中了貴族大禮包標識flag: 1, // 小彩燈切換標識lampUrl: require('../../assets/luckDraw-icon/lamp1.png'),numUrl:'http://jsy-17.jusyuan.com/h5/static-page/public-images/draw-img/', // 禮物數量的url}},mounted() {this.initDrawData();this.getLuckyRank();},created() {this.lampTimer = null;this.lampTimer = setInterval(()=>{this.flag = !this.flag;if(this.flag){this.lampUrl = require('../../assets/luckDraw-icon/lamp1.png')}else{this.lampUrl = require('../../assets/luckDraw-icon/lamp2.png')}},1000)},computed:{rankIndex() {// 注意，不能將參數放置在rankIndex(index)return (index) => {if(index != 0 && index != 1 && index != 2){if(index < 9){return '0'+(index + 1);}else{return index + 1;}}}},// 處理昵稱字數的顯示狀態formatName() {return (name) =>{let newStr = '';if (name.length <= 6) {newStr = name;} else{let char = '';for (let i = 0, len = name.length - 2; i < len; i++) {char += '*';}newStr = name.substr(0, 1) + char + name.substr(-1, 1);}return newStr;}},},methods: {//客戶端方法-返回上一級頁面，若沒有可返回的將直接關閉webviewgoBack(){goBack();},// 獲取抽獎初始化數據initDrawData() {initRouletteLottery({}).then(({data})=>{this.lotteryPrizeTimes = data.lotteryPrizeTimes;this.ticketsSum = data.remainTicket;this.prizesList = data.lotteryPrizeViewList;this.noticeList = data.winingRecordViewList;})},// 獲取幸運用戶列表getLuckyRank() {getLuckyRank({}).then(({data})=>{this.luckyList = data;})},// 傳遞給子組件的事件buyTicket(param){this.currentIndex = param;},// 開始抽獎luckDraw(times) {this.showOneOverlay = false;this.showTenOverlay = false;if(times == 10 && this.ticketsSum < 10){this.ticketSource = 2;this.showBuyTicket = true;this.currentIndex = 2;return;}if(this.ticketsSum <= 0){this.ticketSource = 1;this.showBuyTicket = true;this.currentIndex = 1;return;}if(this.isRolling){ // 開始抽獎this.isRolling = false;this.drawTimes = times;this.bgSwitch = true;this.time = Date.now();this.speed = 150;this.diff = 7;setTimeout(()=>{this.lottery();},300)this.move(); // 開始抽獎動效}},// 抽獎接口lottery() {lottery({rouletteLotteryTimes : this.drawTimes}).then(({data})=>{this.giftList = data;this.giftList.map((item,index)=>{if(this.drawTimes == 1){this.giftId = item.lotteryPrizeView.id;}if(item.lotteryNoblePrizeView){ // 若中獎含有貴族大禮包時再次彈起this.hasNobleGift = true;this.showTenOverlay = false;this.prizeName = item.lotteryPrizeView.name;this.prizeVal = item.lotteryPrizeView.valueDescribe;this.noblePrizeIcon = item.lotteryPrizeView.prizeIcon;}else{this.hasNobleGift = false;}})// 刷新土豪券的數量this.initDrawData();})},// 開始轉動move() {this.timer = setTimeout(() => {this.current++;if (this.current > 11) {this.current = 0;}console.log(this.giftId+'***'+this.prizesList[this.current].id);// 若抽中的獎品id存在，則開始減速轉動if (this.giftId && (Date.now() - this.time) / 1000 > 2) {this.speed += this.diff; // 轉動減速// 若轉動時間超過4秒，并且獎品id等于小格子的獎品id，則停下來if ((Date.now() - this.time) / 1000 > 4 &&this.giftId == this.prizesList[this.current].id) {clearTimeout(this.timer);setTimeout(()=>{this.bgSwitch = false;},500)if(this.drawTimes == 1){this.showOneOverlay = true;}else{ // 抽十次this.showTenOverlay = true;}if(this.hasNobleGift){ // 如果中貴族禮物，延時顯示貴族特效setTimeout(()=>{this.showTenOverlay = false;this.showOneOverlay = true;},1000)}this.isRolling = true; // 抽獎結束return;}}else {// 若抽中的獎品不存在，則加速轉動this.speed -= this.diff;}this.move();}, this.speed);},// 購買抽獎券goBuyTicket() {this.ticketSource = 3;this.showBuyTicket = true;},// 關閉遮罩層closePop(type) {if(type == 1){this.showOneOverlay = false;}else{this.showTenOverlay = false;}},// 活動規則activityRule() {this.showRule = true;},// 中獎紀錄prizeRecord() {this.showRecord = true;this.$refs.recordChild.getDrawRecord();}},// 頁面銷毀時執行destroyed() {this.lampTimer = null;}} </script> CSS部分 <style lang="scss" scoped>.title-bar {width: 100%;height: 0.96rem;line-height: 0.96rem;background: #FFFFFF;position: fixed;left: 0;top: 0;z-index: 1000;font-size: 0.28rem;justify-content: flex-start;.icon-back {width: 0.19rem;height: 0.32rem;margin: 0 2.4rem 0 0.32rem;img {width: 100%;height: 100%;}}.nav-tit {text-align: center;font-size: 0.32rem;}}.van-swipe-item{width: 4.1rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.luck-rotary {width: 7.2rem;height: 100%;overflow-x: hidden;background: #FFC39B;}.router-btn{width: 0.56rem;position: absolute;right: 0;overflow: hidden;}.active-rule{top: 0.9rem;height: 1.26rem;background: url("../../assets/luckDraw-icon/active-rule.png") no-repeat;background-size: 100% 100%;}.prize-rule{top: 5rem;height: 1.29rem;background: url("../../assets/luckDraw-icon/prize-rule.png") no-repeat;background-size: 100% 100%;}.header {width: 7.2rem;height: 8.48rem;background: url("../../assets/luckDraw-icon/draw-head-bg.png") no-repeat;background-size: 100% 100%;margin-top: 0.96rem;overflow-x: hidden;position: relative;}.main {width: 100%;padding-bottom: 0.5rem;position: relative;/*NoticeBar 通知欄*/.van-notice-bar{font-size: 0.26rem;width: 4.5rem;height: 0.64rem;line-height: 0.64rem;border-radius: 0.11rem;background: #EC5322;left: 0.9rem;top: 0.15rem;padding: 0 0.08rem;text-align: left;}.notice-swipe {height: 0.64rem;line-height: 0.64rem;}.coin-color{color: #FFF600;}#lampIcon {width: 6.25rem;height: 6.2rem;position: absolute;left: .08rem;bottom: 1.98rem;}}.draw-box {width: 6.37rem;height: 9.64rem;position: absolute;top: -3.4rem;left: 0.4rem;background: url("../../assets/luckDraw-icon/rotary-bg.png") no-repeat;background-size: 100% 100%;}.prize-list {width: 5.7rem;height: 5.6rem;position: absolute;left: 0.36rem;top: 1.75rem;border-radius: 0.2rem;.bg-color{width: 1.3rem;height: 1.3rem;border-radius: 0.18rem;position: absolute;top: 0;left: 0;background: rgba(0,0,0,0.5);}.line_item {width: 1.3rem;height: 1.3rem;color: #C3490F;line-height: 1.3rem;background-color: #FFEDDA;border-radius: 0.18rem;box-shadow: 0 -0.06rem 0.1rem 0 rgba(238, 107, 107, 0.5);.gift-icon{width: 1.3rem;height: 1.3rem;position: relative;img{width: 100%;height: 100%;}.noble-icon{width: 0.57rem;height: 0.6rem;position: absolute;top: -0.03rem;left: -0.05rem}}.coin-num{width: 1.1rem;height: 0.32rem;text-align: center;line-height: 0.38rem;font-size: 0.18rem;color: #FD0000;position: absolute;bottom: 0.3rem;left: 0.1rem;border-radius: 0.16rem;background: linear-gradient(180deg, #FEFF53 0%, #FFCD21 100%);}.prize-name{width: 100%;height: 0.3rem;line-height: 0.3rem;position: absolute;bottom: 0;left: 0;color: #C78153;font-size: 0.18rem;}.noble-color{font-weight: bold;color: #fd0000;font-size: 0.2rem;}}#tuHao {width: 2.72rem;height: 2.68rem;background: url("../../assets/luckDraw-icon/tuhq-blance.png") no-repeat;background-size: 100% 100%;font-size: 0.46rem;color: #FFFFFF;position: absolute;top: 1.46rem;left: 1.5rem;span {display: block;width: 2rem;height: 0.8rem;margin: 1.3rem auto 0;line-height: 0.8rem;}}.position {position: absolute;bottom: 0.08rem;}#item1 {left: 0.1rem;top: 0.08rem;}#item2 {left: 1.5rem;top: 0.08rem;}#item3 {left: 2.9rem;top: 0.08rem;}#item4 {right: 0.1rem;top: 0.08rem;}#item5 {right: 0.08rem;top: 1.45rem;}#item6 {right: 0.08rem;bottom: 1.47rem;}#item7 {right: 0.08rem;}#item8 {right: 1.5rem;}#item9 {left: 1.5rem;}#item10 {left: 0.08rem;}#item11 {left: 0.08rem;bottom: 1.46rem;}#item12 {left: 0.08rem;top: 1.45rem;}.line_item.active .bg-color{color: #333333;background: none;}}.white_item {background-color: #FF9F79;}.draw-btn{width: 100%;position: absolute;left: 0;bottom: 0.8rem;justify-content: space-evenly;.roll-bg{width: 2.7rem;height: 0.9rem;}.roll1{background: url("../../assets/luckDraw-icon/draw1.png") no-repeat;background-size: 100% 100%;}.roll10{background: url("../../assets/luckDraw-icon/draw10.png") no-repeat;background-size: 100% 100%;}}.exchange-times{width: 100%;color: #FFFFFF;font-size: 0.22rem;position: absolute;bottom: 0.27rem;left: 0;.star-flag{vertical-align: middle;margin-right: 0.1rem;}.noble-prize{color: #FFF600;}}.lucky-list{width: 7.2rem;height: 6.4rem;background: url("../../assets/luckDraw-icon/lucky-list.png") no-repeat #ffc39b;background-size: 100% 100%;overflow-y: hidden;position: absolute;top: 6.8rem;left: 0;.title-list{width: 100%;color: #FF6380;font-size: 0.28rem;justify-content: space-around;margin-top: 1.2rem;}.list-box{height: 4.6rem;overflow-y: scroll;}.user-list{.list-item{justify-content: space-around;margin: 0 0.2rem 0.2rem;}.list-item:first-of-type .rank-num{background: url("../../assets/luckDraw-icon/No1.png") no-repeat;background-size: 100% 100%;}.list-item:nth-of-type(2) .rank-num{background: url("../../assets/luckDraw-icon/No2.png") no-repeat;background-size: 100% 100%;}.list-item:nth-of-type(3) .rank-num{background: url("../../assets/luckDraw-icon/No3.png") no-repeat;background-size: 100% 100%;}.rank-num{color: #D8D8D8;font-size: 0.3rem;font-style: italic;font-weight: bold;width: 0.53rem;height: 0.56rem;text-align: center;margin-left: .3rem;}.user-info{width: 2.65rem;img{width: 0.72rem;height: 0.72rem;border-radius: 0.36rem;margin-right: 0.1rem;}.nick-name{color: #666666;font-size: 0.28rem;width: 1.8rem;text-align: left;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}}.prizes-info{min-width: 1rem;flex-direction: column;.gift-box{width: 0.56rem;height: 0.56rem;img{width: 100%;height: 100%;}}.gift-name{color: #666666;font-size: 0.22rem;}}}.footer{padding: 0.3rem 0;.txt{font-size: 0.24rem;color: #979797;}}}.wrapper {height: 100%;.gift-tips{color: #FFFFFF;font-size: 0.24rem;top: 0.3rem;}}.close-btn{width: 0.7rem;height: 0.7rem;background: url("../../assets/luckDraw-icon/close-icon.png") no-repeat;background-size: 100% 100%;position: absolute;bottom: -1rem;left: 3.2rem;}.draw-once{position: relative;margin-top: -30%;p{position: relative;top: 0.8rem;left: 0;}.close-btn{bottom: -1.5rem;left: 1.5rem;}.gift-desc-pop{color: #FFE83E;font-size: 0.36rem;}.gift-name-pop{color: #FFFFFF;font-size: 0.32rem;}.gift-box-pop{position: relative;.light-icon{width: 3.55rem;height: 4.15rem;animation:changDeg 5s linear 0.8s infinite;}.gift-icon-pop{width: 2.8rem;height: 2.8rem;position: absolute;top: 1.8rem;left: 0.4rem;img{width: 100%;height: 100%;}}.gift-value{color: #FFFFFF;font-size: 0.22rem;width: 2rem;height: 0.43rem;line-height: 0.5rem;background: url("../../assets/luckDraw-icon/bubble-icon.png") no-repeat;background-size: 100% 100%;margin: -0.5rem auto;}}}.draw-ten{width: 100%;position: relative;.gift-box-ten{.gift-desc-ten{color: #FFE83E;font-size: 0.36rem;margin: 0 0 0.7rem 0;}.flex-justify{justify-content: space-between;}.gift-list{flex-wrap: wrap;.gift-item{position: relative;margin: 0 0.4rem 0.8rem;}.margin{margin: 0 0.2rem 0.8rem;}.gift-icon-little{width: 1rem;height: 1rem;margin: 0 auto;}.gift-value-little{width: 1.2rem;height: 0.36rem;font-size: 0.18rem;line-height: 0.45rem;background: url("../../assets/luckDraw-icon/bubble-little.png") no-repeat;background-size: 100% 100%;}}.flex-start{justify-content: flex-start;/*padding: 0 0 0 0.3rem;*/}.num-icon{width: 1.28rem;height: 0.8rem;position: absolute;right: -0.6rem;top: -0.5rem;}.gift-icon-ten{width: 1.4rem;height: 1.4rem;border: 0.04rem solid #FF8364;border-radius: 0.7rem;background: #FEF8E1;img{width: 100%;height: 100%;}}.gift-name-ten{color: #FFFFFF;font-size: 0.24rem;margin-top: 0.3rem;}.gift-value-ten{width: 1.6rem;height: 0.43rem;color: #FFFFFF;font-size: 0.22rem;line-height: 0.5rem;background: url("../../assets/luckDraw-icon/bubble-big.png") no-repeat;background-size: 100% 100%;}}.get-gift-ten{margin: 0 auto 0.2rem;}}.get-gift{color: #FFFFFF;font-size: 0.36rem;font-weight: bold;width: 3.6rem;height: 0.9rem;line-height: 0.9rem;background: url("../../assets/luckDraw-icon/pay-btn-bg.png") no-repeat;background-size: 100% 100%;margin: 1rem auto 0;}/*無限旋轉動畫*/@keyframes changDeg{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}} </style>

總結

以上是生活随笔為你收集整理的vue实现跑马灯抽奖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。