代码部分
<view class="container1">
<view class="head-box">
<image src="../../../static/active/bigzp/qdcj-m1.png" mode="widthFix"></image>
</view>
<view class="bigdzp">
//大转盘背景图
<image src="../../../static/active/bigzp/zm-zuanbg.png" mode="widthFix"></image>
<view class="price-list" >
//大转盘奖品图 奖品 0开始逆时针排序
<image ref="dzp" id="bigzp" class="" src="../../../static/active/bigzp//qdcj-m2.png" mode="widthFix"></image>
</view>
//按钮
<image class="btn" @click="ratating(“奖品排列数”,“提示”’)" src="../../../static/active/bigzp/play-btn.png" mode="widthFix"> </image>
</view>
</view>
js部分
getRandom(n,m){ //该方法产生[n,m]之间随机数
let result = Math.floor(Math.floor(Math.random()*(m-n+1)+n))
return result;
},
ratating(deg,text){
this.goTimes -- //抽奖次数
this.isGo = true
let time_fw = this.getRandom(-0.5*360/‘奖品数量’,0.5*360/‘奖品数量’)// 让指针在中奖奖品区域随机停止
let times = this.getRandom(3,6)//圈数(从用户体验角度考虑,设计随机转3-6圈。最少3圈,最多6圈)
this.randomDeg = (deg-1)*360/‘奖品数量’ + 360 * times+time_fw //记录这次要旋转的度数(传来的度数+圈数)
let realDeg = (360 - this.lastDeg % 360) + this.lastDeg + this.randomDeg
/*上次指针离初始状态的度数 + 上次的度数 + 这次要旋转的度数
(这样的目的是为了每次旋转都从原点开始,保证数据准确)*/
let domdzp = document.getElementById('bigzp');
console.log(deg,realDeg)
domdzp.style.transform = `rotate(${realDeg}deg)`;
setTimeout(() => {
this.isGo = false
console.log(`以原点为基准共旋转了${this.randomDeg}度,
以一圈为基准相对旋转了${this.randomDeg % 360}度,最终结果为${text}`)
this.lastDeg = realDeg //把这次度数存储起来,方便下一次获取
},4000) //4000ms为css里面写的执行动画的时间
},