目錄UI初始參考各值參考圖方案分析-參數(shù)配置核心思路：關(guān)于旋轉(zhuǎn)位置參數(shù)配置實現(xiàn)邏輯組件使用抽獎效果結(jié)語UI

老規(guī)矩，先看下靜態(tài)UI，以便于有個圖像概念

初始參考各值參考圖

方案分析-參數(shù)配置核心思路：

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

關(guān)于旋轉(zhuǎn)位置

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

參數(shù)配置 data 給與組件一些系統(tǒng)參數(shù) 旋轉(zhuǎn)的圈數(shù)、效果等等配置 計算屬性 rotateStyle 旋轉(zhuǎn)角度，實時調(diào)整 props 提供組件內(nèi)部接口的參數(shù)和一些核心數(shù)據(jù)，比如轉(zhuǎn)盤的圖片等等

// 基礎(chǔ)參數(shù)data () { return { isrun: false, rotateAngle: 0, // 旋轉(zhuǎn)角度 config: { duration: 4000, // 總旋轉(zhuǎn)時間 ms級 circle: 8, // 旋轉(zhuǎn)圈數(shù) mode: ’ease-in-out’ // 由快到慢 慣性效果都省了 }, cricleAdd: 1, // 第幾次抽獎 drawIndex: 0 // 中獎索引 轉(zhuǎn)盤圖片排序 指針右手開始 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);` } } // 入?yún)?props: { httpData: {}, // 接口調(diào)用所需參數(shù) stateData: { type: Object, default: () => { return { coin: 0, // 超級幣數(shù)量 prize_img: ’’ // 轉(zhuǎn)盤圖片 } } } }實現(xiàn)邏輯 咱們要做的事情很簡單，計算出中獎獎品的位置，輸出即可 位置即對應(yīng)圈數(shù)，drawIndex對應(yīng)獎品位置，這個參數(shù)里面說過了

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

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

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) // 更新數(shù)據(jù)，此處僅為示例，推薦使用 draw_fin方法的 start/fin 進行相應(yīng)數(shù)據(jù)更新this.isrun = truethis.rotateAngle = this.config.circle * 360 * this.cricleAdd - (22.5 + this.drawIndex * 45)// 圈數(shù)位置解析// this.config.circle * 360 * this.cricleAdd 順時針總?cè)?shù)/累積總?cè)?shù)// 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>抽獎效果

結(jié)語

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

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

以上就是VUE實現(xiàn)大轉(zhuǎn)盤抽獎的詳細內(nèi)容，更多關(guān)于vue 大轉(zhuǎn)盤抽獎的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！