黄啊码向来简单粗暴，来，代码伺候
js代码如下：
php;gutter:true;
//index.js
//获取应用实例
const app = getApp()</p>
<p>//计数器
var interval = null;</p>
<p>//值越大旋转时间越长 即旋转速度
var intime = 50;</p>
<p>Page({
data: {
color: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
//9张奖品图片
images: [],
btnconfirm: '/images/dianjichoujiang.png',
clickLuck:'clickLuck',
luckPosition:2,
prizeWeight:[],
titles:[],
},</p>
<p>onLoad:function(){
var that=this;
wx.request({
url: 'XXXXXXX',
method:'POST',
header: {
'content-type': 'application/json' // 默认值
},
data:{
},success(res){
that.setData({prizeWeight:res.data.data.percent_list});//奖项权重数组，表征各奖项的中奖机会占总数的百分比。比如一等奖的中奖率是1%，二等奖的中奖率是5%
that.setData({images:res.data.data.images_list});
that.setData({titles:res.data.data.title_list});
//例子：prizeWeight:({5,5,10,20,30,10,10,10})记住是按顺序的，所有的加起来等于100,images就是八张图片的地址，titles就是八个标题的内容</p>
<p>}
})</p>
<p>},</p>
<p>//点击抽奖按钮
clickLuck:function(){
var e = this;
var weightSum = e.data.prizeWeight.reduce(function(prev, currVal){ //计算权重之和：1+5+20+74=100
return prev + currVal; //prev 是前一次累加后的数值，currVal 是本次待加的数值
}, 0);
console.log(weightSum);
var random = Math.random()*weightSum;
console.log(random);
var concatWeightArr = e.data.prizeWeight.concat(random); //将随机数加入权重数组
console.log(concatWeightArr);
var sortedWeightArr = concatWeightArr.sort(function(a, b){return a-b;}); //将包含随机数的新权重数组按从小到大（升序）排序
console.log(sortedWeightArr);
var randomIndex = sortedWeightArr.indexOf(random); //索引随机数在新权重数组中的位置
console.log(randomIndex);
randomIndex = Math.min(randomIndex, e.data.images.length -1); //权重随机数的下标不得超过奖项数组的长度-1，重新计算随机数在奖项数组中的索引位置
console.log(randomIndex);
e.setData({luckPosition:randomIndex});
//设置按钮不可点击
e.setData({
btnconfirm:'/images/dianjichoujiangd.png',
clickLuck:'',
})
//清空计时器
clearInterval(interval);
var index = 0;
console.log(e.data.color[0]);
//循环设置每一项的透明度
interval = setInterval(function () {
if (index > 7) {
index = 0;
e.data.color[7] = 0.5
} else if (index != 0) {
e.data.color[index - 1] = 0.5
}
e.data.color[index] = 1
e.setData({
color: e.data.color,
})
index++;
}, intime);</p>
<p>//模拟网络请求时间 设为两秒
var stoptime = 2000;
setTimeout(function () {
e.stop(e.data.luckPosition);
}, stoptime)</p>
<p>},</p>
<p>stop: function (which){
var e = this;
//清空计数器
clearInterval(interval);
//初始化当前位置
var current = -1;
var color = e.data.color;
for (var i = 0; i < color.length; i++) {
if (color[i] == 1) {
current = i;
}
}
//下标从1开始
var index = current + 1;</p>
<p>e.stopLuck(which, index, intime, 10);
},</p>
<p>/*<em>
* which:中奖位置
* index:当前位置
* time：时间标记
* splittime：每次增加的时间 值越大减速越快
</em>/
stopLuck: function (which, index,time,splittime){
var e = this;
//值越大出现中奖结果后减速时间越长
var color = e.data.color;
setTimeout(function () {
//重置前一个位置
if (index > 7) {
index = 0;
color[7] = 0.5
} else if (index != 0) {
color[index - 1] = 0.5
}
//当前位置为选中状态
color[index] = 1
e.setData({
color: color,
})
//如果旋转时间过短或者当前位置不等于中奖位置则递归执行
//直到旋转至中奖位置
if (time < 400 || index != which){
//越来越慢
splittime++;
time += splittime;
//当前位置+1
index++;
e.stopLuck(which, index, time, splittime);
}else{
//1秒后显示弹窗
setTimeout(function () {
wx.showModal({
title: '提示',
content: e.data.titles[which],
showCancel: false,
success: function (res) {
if (res.confirm) {
//设置按钮可以点击
e.setData({
btnconfirm: '/images/dianjichoujiang.png',
clickLuck: 'clickLuck',
})
}
}
})</p>
<p>}, 1000);
}
}, time);
console.log(time);
}
})</p>
<pre><code>
前端：
</code></pre>
<p>class="container">
class='frame_view'>
class='frame_row'>
class='frame_item' style='opacity:{{color[0]}}' src='{{images[0]}}'>
class='frame_item' style='opacity:{{color[1]}}' src='{{images[1]}}'>
class='frame_item' style='opacity:{{color[2]}}' src='{{images[2]}}'></p>
<p>class='frame_row'>
class='frame_item' style='opacity:{{color[7]}}' src='{{images[7]}}'>
class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'>
class='frame_item' style='opacity:{{color[3]}}' src='{{images[3]}}'></p>
<p>class='frame_row'>
class='frame_item' style='opacity:{{color[6]}}' src='{{images[6]}}'>
class='frame_item' style='opacity:{{color[5]}}' src='{{images[5]}}'>
class='frame_item' style='opacity:{{color[4]}}' src='{{images[4]}}'></p>
<pre><code>
wxss：
</code></pre>
<p>/<strong>index.wxss</strong>/
.frame_view{
bottom: 160rpx;
left: 60rpx;
right: 60rpx;
width:590rpx;
height:590rpx;
padding: 20rpx;
background: #792db3;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border-radius: 30rpx;
}
.frame_row{
width:580rpx;
height:180rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.frame_item{
width:180rpx;
height:180rpx;
}
嗯，就这样，如果还不会，扫我码，戳我头像，使劲戳，OK？
Original: https://www.cnblogs.com/huangama/p/15650951.html
Author: 黄啊码
Title: 【黄啊码】小程序：九宫格抽奖如何实现？可控制抽奖率
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/619713/
转载文章受原作者版权保护。转载请注明原作者出处！