首先我的代码如下:
export default {
data () {
return {
prize_list: ['1000元优惠券', '网红沙发', '1888元定制大礼包', '西门子洗衣机', '谢谢参与', '全棉斜纹四件套'], // 奖品列表
start_rotating_degree: 0, // 初始旋转角度
rotateAngle: 0, // 将要旋转的角度
rotateAnglePointer: 0, // 指针将要旋转的度数
rotate_transition: 'transform 6s ease-in-out', // 初始化选中的过度属性控制
rotate_transition_pointer: 'transform 12s ease-in-out', // 初始化指针过度属性控制
click_flag: true, // 是否可以旋转抽奖
index: 0,
during_time: 6
};
},
methods: { // 此方法为处理奖品数据
rotating () {
if (!this.click_flag) return;
this.index = Math.floor(Math.random() * this.prize_list.length);
let that = this;
let type = 0; // 默认为 0 转盘转动 1 箭头和转盘都转动(暂且遗留)
this.click_flag = false; // 旋转结束前,不允许再次触发
if (type === 0) {
let resultAngle = 360 / this.prize_list.length * this.index;
let randCircle = 6; // 附加多转几圈,2-3
let rotateAngle = - (randCircle * 360 + resultAngle);
// this.start_rotating_degree = rotateAngle;
this.rotateAngle = 'rotate(' + rotateAngle + 'deg)';
// 旋转结束后,允许再次触发
setTimeout(() => {
that.click_flag = true;
}, this.during_time * 1000 + 1500); // 延时,保证转盘转完
}
}
}
};
现在的问题是这样,我只能保证我初次转动时停止位置准确,当第二次点击触发旋转后就无法准确定位到目标项了。
我的理解如下:
第一次我停留在了3号位置,第二次点击就应该从3号位置开始计算,可是随机到的确实产品下标,这两个数如何关系上,实在没有想明白,还望能得到诸位解答,谢谢!
解决了,可能办法粗糙了些