小程序九宫格抽奖_var imageaward = this.data.imageaward[j]; awardlis-CSDN博客

html:

<view class="container-out">
    <view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view>
    <view class="container-in">
        <view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">
            <image class="award-image" src="{{item.imageAward}}"></image>
        </view>
        <view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">
            START
        </view>
    </view>
</view>

css

/* 九宫格转盘 */
.container-out {  
    height: 600rpx;  
    width: 650rpx;  
    background-color: #b136b9;  
    margin: 100rpx auto;  
    border-radius: 40rpx;  
    box-shadow: 0 10px 0 #871a8e;  
    position: relative;  
  }  
     
  .container-in {  
    width: 580rpx;  
    height: 530rpx;  
    background-color: #871a8e;  
    border-radius: 40rpx;  
    position: absolute;  
    left: 0;  
    right: 0;  
    top: 0;  
    bottom: 0;  
    margin: auto;  
  }  
     
  /**小圆球  
  box-shadow: inset 3px 3px 3px #fff2af;*/ 
     
  .circle {  
    position: absolute;  
    display: block;  
    border-radius: 50%;  
    height: 20rpx;  
    width: 20rpx;  
  }  
     
  .content-out {  
    position: absolute;  
    height: 150rpx;  
    width: 166.6666rpx;  
    background-color: #f5f0fc;  
    border-radius: 15rpx;  
    box-shadow: 0 5px 0 #d87fde;  
  }  
     
  /**居中 加粗*/ 
     
  .start-btn {  
    position: absolute;  
    margin: auto;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    right: 0;  
    border-radius: 15rpx;  
    height: 150rpx;  
    width: 166.6666rpx;  
    background-color: #ffe400;  
    box-shadow: 0 5px 0 #e7930a;  
    color: #f6251e;  
    text-align: center;  
    font-size: 55rpx;  
    font-weight: bolder;  
    line-height: 150rpx;  
  }  
     
  .award-image {  
    position: absolute;  
    margin: auto;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    right: 0;  
    height: 140rpx;  
    width: 130rpx;  
  }

 /**
   * 页面的初始数据
   */
  data: {
    // 九宫格转盘
    circleList: [],//圆点数组  
    awardList: [],//奖品数组  
    colorCircleFirst: '#FFDF2F',//圆点颜色1  
    colorCircleSecond: '#FE4D32',//圆点颜色2  
    colorAwardDefault: '#F5F0FC',//奖品默认颜色  
    colorAwardSelect: '#ffe400',//奖品选中颜色  
    indexSelect: 0,//被选中的奖品index  
    isRunning: false,//是否正在抽奖  
    imageAward: [
      '../../images/1.jpg',
      '../../images/2.jpg',
      '../../images/3.jpg',
      '../../images/4.jpg',
      '../../images/5.jpg',
      '../../images/6.jpg',
      '../../images/7.jpg',
      '../../images/8.jpg',
    ],//奖品图片数组  


  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 九宫格转盘
    var _this = this;
    //圆点设置  
    var leftCircle = 7.5;
    var topCircle = 7.5;
    var circleList = [];
    for (var i = 0; i < 24; i++) {
      if (i == 0) {
        topCircle = 15;
        leftCircle = 15;
      } else if (i < 6) {
        topCircle = 7.5;
        leftCircle = leftCircle + 102.5;
      } else if (i == 6) {
        topCircle = 15
        leftCircle = 620;
      } else if (i < 12) {
        topCircle = topCircle + 94;
        leftCircle = 620;
      } else if (i == 12) {
        topCircle = 565;
        leftCircle = 620;
      } else if (i < 18) {
        topCircle = 570;
        leftCircle = leftCircle - 102.5;
      } else if (i == 18) {
        topCircle = 565;
        leftCircle = 15;
      } else if (i < 24) {
        topCircle = topCircle - 94;
        leftCircle = 7.5;
      } else {
        return
      }
      circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
    }
    this.setData({
      circleList: circleList
    })

    //圆点闪烁  
    setInterval(function () {
      if (_this.data.colorCircleFirst == '#FFDF2F') {
        _this.setData({
          colorCircleFirst: '#FE4D32',
          colorCircleSecond: '#FFDF2F',
        })
      } else {
        _this.setData({
          colorCircleFirst: '#FFDF2F',
          colorCircleSecond: '#FE4D32',
        })
      }
    }, 500)//设置圆点闪烁的效果  

    //奖品item设置  
    var awardList = [];
    //间距,怎么顺眼怎么设置吧.  
    var topAward = 25;
    var leftAward = 25;
    for (var j = 0; j < 8; j++) {
      if (j == 0) {
        topAward = 25;
        leftAward = 25;
      } else if (j < 3) {
        topAward = topAward;
        //166.6666是宽.15是间距.下同  
        leftAward = leftAward + 166.6666 + 15;
      } else if (j < 5) {
        leftAward = leftAward;
        //150是高,15是间距,下同  
        topAward = topAward + 150 + 15;
      } else if (j < 7) {
        leftAward = leftAward - 166.6666 - 15;
        topAward = topAward;
      } else if (j < 8) {
        leftAward = leftAward;
        topAward = topAward - 150 - 15;
      }
      var imageAward = this.data.imageAward[j];
      awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });
    }
    this.setData({
      awardList: awardList
    })
  },
  //开始抽奖  
  startGame: function () {
    if (this.data.isRunning) return
    this.setData({
      isRunning: true
    })
    var _this = this;
    var indexSelect = 0
    var i = 0;
    var timer = setInterval(function () {
      // console.log(indexSelect)
      if (indexSelect == 7) {
        indexSelect = 0
      } else {
        indexSelect++;
      }
      //这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度  
      i += 30;
      if (i > 1000) {
        // 这里的5就是奖品数组的下标，到时候从后台获取下标 模拟： Math.floor((Math.random() * 7)  这样随机一个数字中奖
        if (indexSelect == 1) {
          //去除循环  
          clearInterval(timer)
          //获奖提示  
          wx.showModal({
            title: '恭喜您',
            content: '获得了第' + (_this.data.indexSelect + 1) + "个优惠券",// 从后台获取的奖品下标，取数组对应下标的值显示给用户看
            showCancel: false,//去掉取消按钮  
            success: function (res) {
              if (res.confirm) {
                _this.setData({
                  isRunning: false
                })
              }
            }
          })
        }

      }
      indexSelect = indexSelect % 8;
      _this.setData({
        indexSelect: indexSelect
      })
    }, (200 + i))
  },

文章来自链接：https://www.jianshu.com/p/fb440e225cc5