微信小程序九宫格抽奖

js

Page({
  data: {
    last_index: 0,//上一回滚动的位置
    amplification_index: 0,//轮盘的当前滚动位置
    roll_flag: true,//是否允许滚动
    max_number: 8,//轮盘的全部数量
    speed: 300,//速度，速度值越大，则越慢 初始化为300
    finalindex: 5,//最终的奖励距离当前的位置！不是最后的几等奖！
    myInterval: "",//定时器
    max_speed: 40,//滚盘的最大速度
    minturns: 8,//最小的圈数为2
    runs_now: 0,//当前已跑步数
    luck_num: 3, //获得的奖项的位置
    end_amp:0, //上一次滚动的位置
    start_flag:true,
    lucks: ['积分+5', '谢谢参与', '积分+10', '谢谢参与', '50元卡券', '100元卡券', '谢谢参与', '积分+20'],

  },



 //开始滚动
  startrolling: function () {
    let _this = this;
    if (this.data.start_flag==true){
      _this.setData({
        start_flag: false
      })
     //初始化步数
       _this.data.runs_now = 0;
       //当前可以点击的状态下
       if (_this.data.roll_flag) {
         _this.data.roll_flag = false;
         //启动滚盘，
         _this.rolling();
       }
      }
  },

//滚动轮盘的动画效果
  rolling: function (amplification_index) {
    var _this = this;
    this.data.myInterval = setTimeout(function () { _this.rolling(); }, this.data.speed);
    this.data.runs_now++;//已经跑步数加一
    this.data.amplification_index++;//当前的加一
    //获取总步数，接口延迟问题，所以最后还是设置成1s以上
    // var count_num = this.data.minturns * this.data.max_number + this.data.finalindex - this.data.last_index;
    var count_num = this.data.minturns * this.data.max_number + this.data.luck_num - this.data.end_amp;

    //上升期间
    if (this.data.runs_now <= (count_num / 3) * 2) {
      this.data.speed -= 30;//加速
      if (this.data.speed <= this.data.max_speed) {
        this.data.speed = this.data.max_speed;//最高速度为40；
      }
    }
    //抽奖结束
    else if (this.data.runs_now >= count_num) {
      clearInterval(this.data.myInterval);
      this.data.roll_flag = true;
     this.setData({
       end_amp: _this.data.amplification_index,
       start_flag: true
     })

      if (_this.data.is_selected==0){
        wx.showModal({
          title: '很遗憾',
          content: _this.data.prize_name,
          showCancel: false,
          success(res) {
         
          }
        })
      } else if (_this.data.is_selected == 1){
        wx.showModal({
          title: '恭喜您',
          content: _this.data.prize_name,
          showCancel: false,
          success(res) {
        
          }
        })
      }
    }
    //下降期间
    else if (count_num - this.data.runs_now <= 10) {
      this.data.speed += 20;
    }
    //缓冲区间
    else {
      this.data.speed += 10;
      if (this.data.speed >= 100) {
        this.data.speed = 100;//最低速度为100；
      }
    }
    if (this.data.amplification_index > this.data.max_number) {//判定！是否大于最大数
      this.data.amplification_index = 1;
    }
    this.setData(this.data);

  },
})

wxml

      

      
       
      
            谢谢参与
            
        
        
       
            谢谢参与
            
        
        
       
            谢谢参与
            
        
        
        
            谢谢参与
            
        
        
        
           立即
           抽奖           
        
        
     
            谢谢参与
            
        
        
        
            谢谢参与
            
        
        
  
            谢谢参与
            
        
        
        
            谢谢参与
            
        
        

        
  

wxss

.luck_box{
  width:586rpx;
  height:582rpx;
  margin:auto;
  /* margin-top:38rpx; */
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0rpx 5rpx 20rpx #c73c34;
  position: absolute;
  left:0;right:0;top:8vh;

}


.luck_box>image{
  display: block;
  width:100%;
  height:100%;

}

.luck_box>.luck{
  width:550rpx;
  height:550rpx;
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
}

 
.luck_box>.luck #li{
  background: #fff;
  margin-left:16rpx;
  margin-top:16rpx;
  width: 162rpx;
  height:162rpx;
  box-sizing: border-box;
  display: block;
  float: left;
  text-align: center;
  line-height: 162rpx;
  position: relative;
  border-radius: 10rpx;
    font-size: 28rpx;
    color: #d04011;

}

.luck_box>.luck #li>.setup_title{
 
  width: 162rpx;
  height:162rpx;
  text-align: center;
  line-height: 162rpx;
  border-radius: 10rpx;
    font-size: 28rpx;
    color: #d04011;
    position: absolute;
    top:0;left:0;right:0;bottom:0;margin:auto;

}

.luck_box>.luck #li>.setup_img{
 display: block;
  width: 162rpx;
  height:162rpx;
  margin:auto;
    border-radius: 10rpx;

}


.startrolling{
  background: #fff;
  margin-left:16rpx;
  margin-top:16rpx;
  width: 142rpx;
  height:142rpx;
  display: block;
  float: left;
  text-align: center;
  line-height: 142rpx;
  position: relative;
  border-radius: 10rpx;
    font-size: 26rpx;
    color: #fff;
    background: #fc4e40;
    border:10rpx solid #fc7366;
}

.startrolling>text{
  display: block;
  width:100%;
  height:38rpx;
  text-align: center;
  line-height:38rpx;
  margin-top:30rpx;
  font-size: 36rpx;
  letter-spacing:6rpx;
}

.startrolling>.st1{
  margin-top:6rpx;
}


 
#pp {
  line-height: 32px;
  color: #9a9a9a;
  text-align: center;
}
 

 
.indexli .indexli_view {
  position: absolute;
  width: 152rpx;
  height: 152rpx;
  background: rgba(255,255,255,0);
  left: -5rpx;
  top: -5rpx;
  border:10rpx solid #fbaa32;
  border-radius: 15rpx;

}
 

.luck_list{
    margin:auto;
  width:660rpx;
  height:405rpx;
  background: #f86f66;
  border:1rpx solid #fbbab1;
  margin-top:70rpx;
  position: absolute;
  left:0;right:0;
  top:56.3vh;

}


.luck_list>image{
  position: absolute;
  width:215rpx;
  height:62rpx;
  left:0;
  right:0;
  margin:auto;
  top:-30rpx;
}