目錄UI初始參考各值參考圖方案分析-參數配置核心思路：關于旋轉位置參數配置實現邏輯組件使用抽獎效果結語UI

老規矩，先看下靜態UI，以便于有個圖像概念

初始參考各值參考圖

方案分析-參數配置核心思路：

將指針和中獎區域劃分兩部分，目前常規的效果，控制中獎區域旋轉，然后停在指針處，當然控制指針也可以，一套思路，dom結構也比較簡單，唯一算是復雜點的就是中獎區域，但是如果你足夠懶，像我一樣，你可以傳遞一張圖也可以，完全依賴遠端數據；

關于旋轉位置

每個移動位置應均分，360/個數 === 每個獎品所占據的位置，以本文為例8個獎品位置，每個區域應為45deg，每個指針中心位置應為±22.5deg（±的意思看你是順時針還是逆時針）具體值看下面 實現邏輯 區域

參數配置 data 給與組件一些系統參數 旋轉的圈數、效果等等配置 計算屬性 rotateStyle 旋轉角度，實時調整 props 提供組件內部接口的參數和一些核心數據，比如轉盤的圖片等等

// 基礎參數data () { return { isrun: false, rotateAngle: 0, // 旋轉角度 config: { duration: 4000, // 總旋轉時間 ms級 circle: 8, // 旋轉圈數 mode: ’ease-in-out’ // 由快到慢 慣性效果都省了 }, cricleAdd: 1, // 第幾次抽獎 drawIndex: 0 // 中獎索引 轉盤圖片排序 指針右手開始 0-... } } // 計算屬性 computed: { rotateStyle () { const _c = this.config return ` -webkit-transition: transform ${_c.duration}ms ${_c.mode}; transition: transform ${_c.duration}ms ${_c.mode}; -webkit-transform: rotate(${this.rotateAngle}deg); transform: rotate(${this.rotateAngle}deg);` } } // 入參 props: { httpData: {}, // 接口調用所需參數 stateData: { type: Object, default: () => { return { coin: 0, // 超級幣數量 prize_img: ’’ // 轉盤圖片 } } } }實現邏輯 咱們要做的事情很簡單，計算出中獎獎品的位置，輸出即可 位置即對應圈數，drawIndex對應獎品位置，這個參數里面說過了

this.rotateAngle = this.config.circle * 360 * this.cricleAdd - (22.5 + this.drawIndex * 45)// 圈數位置解析// this.config.circle * 360 * this.cricleAdd 順時針總圈數/累積總圈數// 22.5 + this.drawIndex * 45 ===> (獎品位置 === this.drawIndex * 45) (指針中間位置 === 22.5) drawIndex，直接從服務端拿就行了，如果沒有跑出位置，自己可以計算一下 為了方便拓展，拋出了兩個狀態對應抽獎的開始于完成，start和fin

this.$emit(’draw_fin’, ’start’)this.$emit(’draw_fin’, ’fin’) 完整代碼，css就不水字數了，下面附上源碼地址

methods: { async run () {if (this.stateData.coin < 10) { console.log(’超級幣不足’) return} if (this.isrun) return// const data = await this.goDraw()// 可以作為彈窗等信息展示this.$emit(’draw_fin’, ’start’)this.$set(this.stateData, ’coin’, 0) // 更新數據，此處僅為示例，推薦使用 draw_fin方法的 start/fin 進行相應數據更新this.isrun = truethis.rotateAngle = this.config.circle * 360 * this.cricleAdd - (22.5 + this.drawIndex * 45)// 圈數位置解析// this.config.circle * 360 * this.cricleAdd 順時針總圈數/累積總圈數// 22.5 + this.drawIndex * 45 ===> (獎品位置 === this.drawIndex * 45) (指針中間位置 === 22.5) this.cricleAdd++ setTimeout(() => { this.$emit(’draw_fin’, ’fin’) this.isrun = false }, this.config.duration) }, goDraw () { // 請求接口拿到中獎商品 // 加下自己項目的樣式 loading 用戶體驗 return new Promise(async (resolve, reject) => { // await 獎品接口 resolve({msg: ’抽獎明細’ }) }) }組件使用

使用

import dialWrap from ’../../components/dial/dial.vue’<dialWrap ref='dialWrap' :stateData='stateData'></dialWrap>抽獎效果

結語

以上就是大概的實現思路了，比較簡單的效果；再細的一些東西以及拓展，大家可以自行發揮哈~

另附本文-源碼地址，歡迎探討哈~

以上就是VUE實現大轉盤抽獎的詳細內容，更多關于vue 大轉盤抽獎的資料請關注好吧啦網其它相關文章！