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

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

初始參考各值參考圖

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

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

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

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

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

// 基礎(chǔ)參數(shù)data () { return { isrun: false, rotateAngle: 0, // 旋轉(zhuǎn)角度 config: { duration: 4000, // 總旋轉(zhuǎn)時(shí)間 ms級(jí) circle: 8, // 旋轉(zhuǎn)圈數(shù) mode: ’ease-in-out’ // 由快到慢 慣性效果都省了 }, cricleAdd: 1, // 第幾次抽獎(jiǎng) drawIndex: 0 // 中獎(jiǎng)索引 轉(zhuǎn)盤(pán)圖片排序 指針右手開(kāi)始 0-... } } // 計(jì)算屬性 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, // 超級(jí)幣數(shù)量 prize_img: ’’ // 轉(zhuǎn)盤(pán)圖片 } } } }實(shí)現(xiàn)邏輯 咱們要做的事情很簡(jiǎn)單，計(jì)算出中獎(jiǎng)獎(jiǎng)品的位置，輸出即可 位置即對(duì)應(yīng)圈數(shù)，drawIndex對(duì)應(yīng)獎(jiǎng)品位置，這個(gè)參數(shù)里面說(shuō)過(guò)了

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

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

methods: { async run () {if (this.stateData.coin < 10) { console.log(’超級(jí)幣不足’) 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 進(jìn)行相應(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 順時(shí)針總?cè)?shù)/累積總?cè)?shù)// 22.5 + this.drawIndex * 45 ===> (獎(jiǎng)品位置 === this.drawIndex * 45) (指針中間位置 === 22.5) this.cricleAdd++ setTimeout(() => { this.$emit(’draw_fin’, ’fin’) this.isrun = false }, this.config.duration) }, goDraw () { // 請(qǐng)求接口拿到中獎(jiǎng)商品 // 加下自己項(xiàng)目的樣式 loading 用戶體驗(yàn) return new Promise(async (resolve, reject) => { // await 獎(jiǎng)品接口 resolve({msg: ’抽獎(jiǎng)明細(xì)’ }) }) }組件使用

使用

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

結(jié)語(yǔ)

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

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

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