轉盤抽獎主要有兩種,指針轉動和轉盤轉動,我的以爲轉盤轉動比較好看點,指針轉動看着頭暈,轉盤轉動時指針是在轉盤的中間位置,這裏要用到css的transform屬性和transition屬性,這兩個由於不經常使用最好是上網查查,用法和功能。css
在html部分html
<div id="wheel_surf"> <div class="wheel_surf_title">幸運大轉盤</div> <div class="lucky-wheel"> <div class="wheel-main"> <div class="wheel-pointer-box"> <div class="wheel-pointer" @click="rotate_handle()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div> </div> <div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}"> <div class="prize-list"> <div class="prize-item" v-for="(item,index) in prize_list" :key="index"> <div class="prize-pic" v-if="item.icon"> <img :src="item.icon" /> </div> <div class="prize-type"> {{item.name}}</div> </div> </div> </div> </div> </div> <div v-transfer-dom> <x-dialog v-model="showHideOnBlur" class="dialog-demo wheel_dialog" hide-on-blur> <div class="img-box"> <div v-show="val == 7" class="noactive"> <p>謝謝參與!祝您下次好運</p> </div> <div v-show="val !== 7"> <p>恭喜你</p> <img :src="imgActive" /> <p>{{item.rewardDesc}}</p> // 獲獎返回值 </div> </div> <div @click="showHideOnBlur=false"> <span class="vux-close"></span> </div> </x-dialog> </div> </div>
獎項數據api
這裏的第一個style部分是指針的位置,距離轉動的初始值,是固定不變的,第二個style是轉盤的位置transform:rotate_angle是轉盤轉動的角度,transition:rotate_transition是轉動的時候它的轉動速度,方向,等等屬性。rotate_handle()是點擊開始轉動的事件。prize_list是轉盤上面的獎品圖片名字列表。dom
data:ide
prize_list: [ { icon: require("../../../../static/WX/img/wheel_big_5.png"), // 獎品圖片 count: 5, // 獎品級別 name: "五等獎", // 獎品名稱 isPrize: 1 // 該獎項是否爲獎品 }, { icon: require("../../../../static/WX/img/wheel_big_2.png"), count: 2, name: "二等獎", isPrize: 1 }, { icon: require("../../../../static/WX/img/wheel_big_4.png"), count: 4, name: "四等獎", isPrize: 1 }, { icon: require("../../../../static/WX/img/wheel_big_1.png"), count: 1, name: "一等獎", isPrize: 1 }, { icon: require("../../../../static/WX/img/wheel_big_6.png"), count: 6, name: "六等獎", isPrize: 1 }, { count: 7, name: "謝謝參與", isPrize: 0 }, { icon: require("../../../../static/WX/img/wheel_big_3.png"), count: 3, name: "三等獎", isPrize: 1 }
], //獎品列表 hasPrize: false, //是否中獎 start_rotating_degree: 0, //初始旋轉角度 rotate_angle: 0, //將要旋轉的角度 start_rotating_degree_pointer: 0, //指針初始旋轉角度 rotate_angle_pointer: 0, //指針將要旋轉的度數 rotate_transition: "transform 6s ease-in-out", //初始化選中的過分屬性控制 rotate_transition_pointer: "transform 12s ease-in-out", //初始化指針過分屬性控制 click_flag: true, //是否能夠旋轉抽獎 item: {}
methods:函數
rotating(index) { if (!this.click_flag) return; var type = 0; // 默認爲 0 轉盤轉動 1 箭頭和轉盤都轉動(暫且遺留) var during_time = 5; // 默認爲1s var random = Math.floor(Math.random() * 7); var result_index result_index = this.val if (this.val == 1) { // 這裏多餘能夠不寫 result_index = 3 } else if (this.val == 2) { result_index = 1 } else if (this.val == 3) { result_index = 6 } else if (this.val == 4) { result_index = 2 } else if (this.val == 5) { result_index = 0 } else if (this.val == 6) { result_index = 4 } else if (this.val == 7) { result_index = 5 } this.valindex = result_index // // 最終要旋轉到哪一塊 var result_angle = [18, 324, 275, 220, 175, 120, 64]; //最終會旋轉到下標的位置所須要的度數,從指針初始位置開始算度數,順時針或逆時針 var rand_circle = 6; // 附加多轉幾圈,2-3 this.click_flag = false; // 旋轉結束前,不容許再次觸發 if (type == 0) { // 轉動盤子 var rotate_angle =this.start_rotating_degree + rand_circle * 360 +result_angle[result_index] - this.start_rotating_degree % 360; this.start_rotating_degree = rotate_angle; this.rotate_angle = "rotate(" + rotate_angle + "deg)"; var that = this; // 旋轉結束後,容許再次觸發 setTimeout(function() { that.click_flag = true; that.game_over(); }, during_time * 1000 + 1500); // 延時,保證轉盤轉完 } else { // } }
js部分主要是轉動中止的角度rotate_angle ,第一次是從0開始到一個角度,在這個角度的基礎上到下一個角度,因此會減去上一個角度對圓的取餘,這裏面this.val是表明着獎品等級,result_index是對應的旋轉到的角度,由於旋轉是順時針,因此角度的選擇要逆時針的選取。轉完調用that.game_over();函數來獲取獎品count等級。flex
下面方法爲處理獎品數據 ui
旋轉停下來時調用game_over()函數this
rotate_handle() { api.activityget(param).then(res => { if (res.status == 200 || res.status == '200') { this.item = res.data this.val = res.data.rewardLevel // 獲取獲獎等級 this.rotating(); //開始旋轉 } else { this.$vux.alert.show({ title: '提示', content: res.message, }) } }) }
下面是css部分,根據你的獎品等級和數量自動調整距離左邊和頂部距離和轉動角度。url
<style scoped> .wheel-main { display: flex; align-items: center; justify-content: center; position: relative; } .wheel-bg { width: 8rem; height: 8rem; background: url("../../../static/img/draw_wheel.png") no-repeat center top; background-size: 100%; color: #fff; font-weight: 500; display: flex; flex-direction: column; justify-content: center; align-content: center; transition: transform 3s ease; } .wheel-pointer-box { position: absolute; top: 50%; left: 50%; z-index: 100; transform: translate(-50%, -60%); } .wheel-pointer { width: 1.5rem; height:2.2rem; background: url("../../../static/img/btn_start_n.png") no-repeat ; background-size: 100%; transform-origin: center 60%; } .wheel-bg div { text-align: center; } .prize-list { width: 100%; height: 100%; position: relative; } .prize-list .prize-item { position: absolute; top: 0; left: 0; z-index: 2; } .prize-list .prize-item:first-child { top: .95rem; left: 2.9rem; transform: rotate(-20deg); } .prize-list .prize-item:nth-child(2) { top: 1.4rem; left: 5rem; transform: rotate(40deg); } .prize-list .prize-item:nth-child(3) { top: 3.2rem; left: 5.95rem; transform: rotate(-270deg); } .prize-list .prize-item:nth-child(4) { top: 5.08rem; left: 5.1rem; transform: rotate(-225deg); } .prize-list .prize-item:nth-child(5) { top: 5.8rem; left: 3.2rem; transform: rotate(-170deg); } .prize-list .prize-item:nth-child(6) { top: 4.7rem; left: 1.5rem; transform: rotate(-115deg); } .prize-list .prize-item:nth-child(6) .prize-type{ font-size: .3rem; } .prize-list .prize-item:nth-child(7) { top: 2.4rem; left: 1.2rem; transform: rotate(-69deg); } .prize-list .prize-item:nth-child(7) img{ width: .7rem; } .prize-list .prize-item:nth-child(8) { top: 1.1rem; left: 2.6rem; transform: rotate(-20deg); } .prize-pic img { width: .8rem; } .prize-count { font-size: .4rem; } .prize-type { font-size: 10px; } </style>