实现微信小程序旋转轮盘抽奖
如图：
点击抽奖转动转盘，最后指针知道那个奖项，就抽中那个奖项
wxml：
代码如下（示例）：
<view class="beijing"><image src="/image/bg_choujiang.png" mode="widthFix"></image></view><view class="cj_but"><button bindtap="getLucky" hover-class="none">点击抽奖</button></view>
该处使用的图片是本地图片。
wxml：
代码如下（示例）：
<view class="beijing"><image src="/image/bg_choujiang.png" mode="widthFix"></image></view><view class="cj_but"><button bindtap="getLucky" hover-class="none">点击抽奖</button></view>
弹框提示：
<view class="beijing"><image src="/image/bg_choujiang.png" mode="widthFix"></image></view><view class="cj_but"><button bindtap="getLucky" hover-class="none">点击抽奖</button></view><view class='modal-mask' bindtap='hideModal' catchtouchmove='preventTouchMove' wx:if='{{showModal}}'></view><view class="modal-dialog {{ !ifWinning && 'fail'}}" wx:if='{{showModal}}'><view class="modal-content"><image class="dingbu" src="/image/zhongjiang.png" mode="widthFix"></image><h4>{{ifWinning ? '恭喜你！中奖了': '谢谢参与！'}}</h4><view wx:if="{{ifWinning}}" class="modal-cont"><image src="/image/shouji.jpg" mode="widthFix"></image><p>恭喜你，抽到了价值**元的iphone一部。请前去<text>某某地址</text>领取</p></view><view wx:else class="modal-cont"><h5>期待再次与您相遇.</h5> </view><text class="iconfont icon-cuowu" bindtap='hideModal'></text></view></view>
该处使用的图片是本地图片。
wxss：
代码如下（示例）：
.lucky_draw_zp {position: relative;margin-top: 40px;}.lucky_draw_zp_img{display: block;width: 80%;margin: 0 auto;}.lucky_draw_zp_btn {width: 50px;position: absolute;left: 50%;top: 50%;margin-left: -25px;margin-top: -32px;}.beijing{width: 70%;margin: 0 auto;margin-top: -20px;}.beijing image{width: 100%;}.cj_but{padding: 30px;}.cj_but button{width: 50% !important;font-size: 16px;color: #d6090d;font-weight: 500;background: #ffd97b;line-height: 30px;}
弹框提示：
.modal-mask {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000000;opacity: 0.6;overflow: hidden;z-index: 9000;color: #fff;}.modal-dialog {width: 300px;overflow: hidden;position: fixed;top: 50%;left: 50%;z-index: 9999;margin-top: -187.5px;margin-left: -150px;}.fail{margin-top: -101px;}.modal-content{width: 100%;text-align: center;position: relative;padding-top: 22px;}.dingbu{position: absolute;top:0;left: 50%;display: block;width: 90%;margin: 0 auto;margin-left: -45%;}.modal-content h4 {width: 100%;position: absolute;left: 0px;top: 42px;text-align: center;font-size: 20px;color: #fff;}.modal-cont {background: #fff;text-align: center;border-radius: 10px;padding-top: 70px;padding-bottom: 30px;}.modal-cont image{display: block;width: 40%;border: 1px solid #e1e1e1;margin: 20px auto;}.modal-cont p{font-size: 15px;padding: 0 15px;color: #333333;line-height: 20px;}.modal-cont p text{color: #e5121a;}.modal-cont h5{display: block;padding-top: 10px;color: #333333;font-size: 16px;font-weight: 700;letter-spacing: 1px;}.modal-content .icon-cuowu{display: block;padding: 10px 0px;margin: 0 auto;font-size: 28px;color: #fff;}
js：
代码如下（示例）：
data: {zpData: {//转盘主图图片urlzpImg: '/image/choujiang.png',equalParts: null, //一共多少等份oneAngle: null, //每一等份多少度// ******** 转盘奖品数据：后台获取数据 ********//注：根据转盘图片对应的值（转盘图片指针处顺时针向右数，起始1，奖品对应的格子数【第几等份上】）awardSetting: ['第1个格子对应内容','第2个格子对应内容','第3个格子对应内容','第4个格子对应内容','第5个格子对应内容','第6个格子对应内容','第7个格子对应内容','第8个格子对应内容',],},ifRoate: false, //转盘是否在转动（判断阻止多次点击）zpRotateDeg: '', //旋转角度// ******** 抽奖结果数据：后台获取数据 ********curKey: null, //抽奖结果 ： 取值范围 1 至 总格子数ifWinning: null, //是否中奖index: '',showModal: false,Height: '',},// 设置旋转动效setToRotate(degNum) {this.setData({zpRotateDeg: '-webkit-transform: rotate(' + degNum + 'deg);transform: rotate(' + degNum + 'deg);-webkit-transition: all 5s ease;transition: all 5s ease;',});},//根据 设置的 指针停止时指向的格子（中奖结果），设置其旋转角度区间setRotate(awardSettingNumber) {//awardSettingNumber 取值范围 1 至 总格子数setTimeout(() => {//转盘停止时 指针 指向的格子 最小角度let minAngle = 360 - awardSettingNumber * this.data.zpData.oneAngle + 5;//转盘停止时 指针 指向的格子 最大角度let maxAngle = 360 - (awardSettingNumber - 1) * this.data.zpData.oneAngle - 5;//旋转区间let newAngle = Math.floor(minAngle + Math.random() * (maxAngle - minAngle)) + 360 * 15;this.setToRotate(newAngle);setTimeout(() => {this.roateEnd(awardSettingNumber);}, 5150);}, 50);},//旋转结束执行roateEnd(awardSettingNumber) {console.log('当前指向格子数 -- ' + awardSettingNumber, this.data.curKey);console.log('当前指向格子数对应内容 -- ' + this.data.zpData.awardSetting[awardSettingNumber - 1], this.data.zpData.awardSetting[this.data.curKey - 1]);// 是否中奖this.setData({showModal: true,});if (this.data.ifWinning) {console.log('中奖');} else {console.log('未中奖');}setTimeout(() => {this.setData({ifRoate: false, //转盘是否在转动});}, 100);},
弹框提示：
// 隐藏弹框hideModal: function () {this.setData({showModal: false});},
