微信小程序实现九宫格

废话不多说，先上样板图

代码就先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;
// pages/Lottery/Lottery.jsPage({  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;}
j's文件：