微信小程序实现简单九宫格抽奖

本文实例为大家分享了微信小程序实现简单九宫格抽奖的具体代码，供大家参考，具体内容如下

废话不多说，先上样板图

代码就先wxml文件：

<view id="container">
  <!--左上-->
  <view id="li" class='{{amplification_index===1?"indexli":""}}'>
    一等奖
    <view></view>
  </view>
  <!--上-->
  <view id="li" class='{{amplification_index===2?"indexli":""}}'>
    二等奖
    <view></view>
  </view>
  <!--右上-->
  <view id="li" class='{{amplification_index===3?"indexli":""}}'>
    三等奖
    <view></view>
  </view>
  <!--左-->
  <view id="li" class='{{amplification_index===8?"indexli":""}}'>
    八等奖
    <view></view>
  </view>
  <!--开始-->
  <a bindtap="startrolling">
    开始抽奖
  </a>
  <!--右-->
  <view id="li" class='{{amplification_index===4?"indexli":""}}'>
    四等奖
    <view></view>
  </view>
  <!--左下-->
  <view id="li" class='{{amplification_index===7?"indexli":""}}'>
    七等奖
    <view></view>
  </view>
  <!--下-->
  <view id="li" class='{{amplification_index===6?"indexli":""}}'>
    六等奖
    <view></view>
  </view>
  <!--右下-->
  <view id="li" class='{{amplification_index===5?"indexli":""}}'>
    五等奖
    <view></view>
  </view>
  <p id="pp"></p>
</view>

wxss文件：

#container {
  width: 750rpx;
  height: 750rpx;
}
 
#li, a {
  background: #fff;
  margin: 20rpx;
  border: 1px solid #000000;
  width: 210rpx;
  height: 210rpx;
  box-sizing: border-box;
  display: block;
  float: left;
  text-align: center;
  line-height: 100px;
  position: relative;
  border-radius: 5rpx;
}
 
a:hover {
  cursor: pointer;
  color: orange;
  font-size: 18px;
}
 
.active {
  background: red;
  color: #fff;
}
 
#pp {
  line-height: 32px;
  color: #9a9a9a;
  text-align: center;
}
 
page view .indexli {
  width: 210rpx;
  height: 210rpx;
  margin-top: 0rpx;
  margin-left: 0rpx;
  margin-bottom: 0rpx;
  margin-right: 0rpx;
  box-sizing: border-box;
}
 
.indexli view {
  position: absolute;
  width: 190rpx;
  height: 190rpx;
  background: #000000;
  opacity: 0.3;
  left: 0;
  top: 0;
  border:10rpx solid blue;
}
 
a {
  position: relative;
}
 
a image {
  width: 100%;
  height: 100%;
  border-radius: 5rpx;
}
 
a view {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  font-size: 40rpx;
  color: #fff;
  font-weight: 700;
  line-height: 40rpx;
  margin-left: -40rpx;
  margin-top: -40rpx;
  left: 50%;
  top: 50%;
 
}
 
.c_title {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 20rpx;
  padding-top: 30rpx;
}
 
.c_title2 {
  color: #fff;
  text-align: center;
  font-size: 40rpx;
}
 
.c_title3 {
  background: red;
  width: 250rpx;
  margin-left: 250rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #fff;
  font-size: 20rpx;
  text-align: center;
}
 
.c_titlr4 {
  background: gold;
  color: red;
  width: 400rpx;
  border-radius: 500rpx;
  text-align: center;
  font-size: 20rpx;
  margin-left: 175rpx;
  margin-top: 10rpx;
}
 
.b1 {
  margin-left: 20rpx;

js文件 

// pages/Lottery/Lottery.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//当前已跑步数
  },
  //开始滚动
  startrolling: function () {
    let _this = this;
    //初始化步数
    _this.data.runs_now = 0;
    //当前可以点击的状态下
    if (_this.data.roll_flag) {
      _this.data.roll_flag = false;
      //启动滚盘，注，若是最终后台无返回就不好意思里
      _this.rolling();
    }
  },
  onShow: function () {
    this.data.min_height = getApp().globalData.windowheight;
    this.setData(this.data);
  },
  //滚动轮盘的动画效果
  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;
    //上升期间
    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;
    }
    //下降期间
    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);
 
  }
})

样式

color: #fff; font-size: 40rpx;}
.b2 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}
.b3 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}
.b4 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}
.b5 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。