1.今天寫一個抽獎轉盤樣式如下，抽獎結果由后端控制

2.代碼如下，

<view class="choujiang"><view class="wheel-wrapper"><view class="wheel-pointer" :class="{freeze: btnImg}" @click="onClickRotate"><image :src="btnImg" style="width: 150upx;" mode='widthFix'></image></view><view class="wheel-bg" :class="{freeze: bgImg}":style="{ transform: 'rotate('+wheelDeg+'deg)',background:'url('+bgImg+')'}"><view class="prize-list"><view class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index"><view class="prize-item":style="{ transform: 'rotate('+(360/ prizeList.length) * index+'deg)'}"><view class="prize-name">{{ item.award_name }}</view><view class="prize-icon"><text class="iconfont iconhb">&#xe61d;</text></view></view></view></view></view></view> </view>

樣式如下：定位什么的可以自己調試

.choujiang{width:100%;height: 600rpx; }.wheel-wrapper {width: 600upx;height: 600upx;position: absolute;top: 60%;left: 50%;transform: translate(-50%, -50%); }.wheel-pointer {width: 150upx;height: 192upx;border-radius: 1000px;background: yellow;position: absolute;left: 50%;top: 61%;margin-top: -88upx;transform: translate(-50%, -50%);text-align: center;line-height: 120upx;z-index: 10; }.wheel-bg {width: 100%;height: 100%;border-radius: 1000px;overflow: hidden;transition: transform 4s ease-in-out;background: #dcdcdc; }.freeze {border-radius: 0;background: none;background-size: 100% !important; }.prize-list {width: 100%;height: 100%;position: relative;text-align: center; }.prize-item-wrapper {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 300upx;height: 300upx; }.prize-item {width: 100%;height: 100%;transform-origin: bottom; }.prize-name {padding: 86upx 0 10upx;color: #E73636;font-size: 32rpx;font-weight: bold; }.prize-icon .iconhb {font-size: 50rpx;color: #FA4A4A; }

3.在data里面進行申明

data() {return {prizeList: [], //獎品分類bgImg: '../../static/img/pan.png', // 轉盤背景btnImg: '../../static/img/zhen2.png', // 轉盤指針圖片lucky: '', // 中獎IDprizeNumber: 8, // 轉盤顯示獎品個數rolling: false, //控制轉盤轉動wheelDeg: 0, //轉的角度} },

4.寫事件

onClickRotate() {let that = this;//參數let data = {type: that.type,id: that.detail.id,}//接口，參考我寫的接口封裝，也可以用自己的辦法，主要的是接口請求成功后的操作that.apifun.unirequest(that.apifun.turntable_luckdraw, 'post', data, (res) => {if (res.code === 1) {let data = res.data;//后端返回的中獎idthat.lucky = data.award;let luckyindex = '';let text = '恭喜得到' + data.award_title + data.memo;//為了轉盤停到指控區域，通過返回的中獎id，在獎品列表里面查找對應的獎項的索引that.prizeList.forEach((item, index) => {if (that.lucky == item.id) {luckyindex = index * 1;}})that.rolling = true; //中獎成功，控制轉盤轉動const {wheelDeg,prizeList} = this;//數字8是轉盤的塊數也是獎項的數量，luckyindex中的獎項的索引this.wheelDeg =wheelDeg -wheelDeg % 360 +8 * 360 +(360 - 360 / prizeList.length * luckyindex);//中獎返回中獎信息，this.apifun.toast(text);是封裝的提示，可以用uniapp的提示方法代替setTimeout(() => {this.rolling = false;this.apifun.toast(text);}, 4500);} else {that.apifun.toast(res.msg)}}) },

總結

以上是生活随笔為你收集整理的uniapp写抽奖转盘的全部內容，希望文章能夠幫你解決所遇到的問題。

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