【黄啊码】小程序：九宫格抽奖如何实现？可控制抽奖率

 黄啊码向来简单粗暴，来，代码伺候

js代码如下：

      //index.js
      //获取应用实例
      const app = getApp()
      //计数器
      var interval = null;
      //值越大旋转时间越长 即旋转速度
      var intime = 50;
      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:[],
        },
       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就是八个标题的内容
              }
          })
        },
       //点击抽奖按钮
       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);
         //模拟网络请求时间 设为两秒
         var stoptime = 2000;
         setTimeout(function () {
            e.stop(e.data.luckPosition);
          }, stoptime)
        },
       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;
          e.stopLuck(which, index, intime, 10);
        },
      /**
       * which:中奖位置
       * index:当前位置
       * time：时间标记
       * splittime：每次增加的时间 值越大减速越快
       */
       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',
                         })
                       }
                     }
                   })
                }, 1000);
              }
          }, time);
         console.log(time);
        }
      })
  
 

前端：

      <!--index.wxml-->
      <view class="container">
       <view class='frame_view'>
      <view class='frame_row'>
      <image class='frame_item' style='opacity:{{color[0]}}' src='{{images[0]}}'></image>
      <image class='frame_item' style='opacity:{{color[1]}}' src='{{images[1]}}'></image>
      <image class='frame_item' style='opacity:{{color[2]}}' src='{{images[2]}}'></image>
      </view>
      <view class='frame_row'>
      <image class='frame_item' style='opacity:{{color[7]}}' src='{{images[7]}}'></image>
      <image class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'></image>
      <image class='frame_item' style='opacity:{{color[3]}}' src='{{images[3]}}'></image>
      </view>
      <view class='frame_row'>
      <image class='frame_item' style='opacity:{{color[6]}}' src='{{images[6]}}'></image>
      <image class='frame_item' style='opacity:{{color[5]}}' src='{{images[5]}}'></image>
      <image class='frame_item' style='opacity:{{color[4]}}' src='{{images[4]}}'></image>
      </view>
      </view>
      </view>
  
 

 wxss：

      /**index.wxss**/
      .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，我的宝？

看啥？进来扫码，一起玩代码石墨文档是一款轻便、简洁的在线协作文档工具，PC端和移动端全覆盖，支持多人同时对文档编辑和评论，让你与他人轻松完成协作撰稿、方案讨论、会议记录和资料共享等工作。https://shimo.im/docs/8PGqp3cHtwVxcTPp

文章来源: markwcm.blog.csdn.net，作者：黄啊码，版权归原作者所有，如需转载，请联系作者。

原文链接：markwcm.blog.csdn.net/article/details/121751638