小程序 九宫格抽奖活动

以下是微信小程序实现九宫格抽奖的步骤和代码示例：

1. 在wxml文件中添加九宫格布局代码：

<view class="grid-container">
  <view class="grid-item" wx:for="{{gridData}}" wx:key="{{index}}" bindtap="startRoll">
    <image class="grid-img" src="{{item.imgUrl}}"></image>
    <text class="grid-text">{{item.name}}</text>
  </view>
</view>

2. 在js文件中定义九宫格数据和抽奖逻辑：

Page({
  data: {
    gridData: [
      { id: 1, name: '奖品1', imgUrl: 'imgUrl1' },
      { id: 2, name: '奖品2', imgUrl: 'imgUrl2' },
      { id: 3, name: '奖品3', imgUrl: 'imgUrl3' },
      { id: 4, name: '奖品4', imgUrl: 'imgUrl4' },
      { id: 5, name: '奖品5', imgUrl: 'imgUrl5' },
      { id: 6, name: '奖品6', imgUrl: 'imgUrl6' },
      { id: 7, name: '奖品7', imgUrl: 'imgUrl7' },
      { id: 8, name: '奖品8', imgUrl: 'imgUrl8' },
      { id: 9, name: '奖品9', imgUrl: 'imgUrl9' }
    ],
    isRolling: false, // 是否正在抽奖
    prizeIndex: -1, // 中奖项的索引
    rollCount: 0, // 已经滚动的格子数
    rollTime: 0, // 滚动的时间
    timer: null // 定时器
  },

  // 开始抽奖
  startRoll: function() {
    if (this.data.isRolling) {
      return;
    }
    this.setData({
      isRolling: true,
      prizeIndex: -1,
      rollCount: 0,
      rollTime: 0
    });
    this.roll();
  },

  // 滚动九宫格
  roll: function() {
    let that = this;
    let data = that.data;
    let gridData = data.gridData;
    let len = gridData.length;
    let prizeIndex = data.prizeIndex;
    let rollCount = data.rollCount;
    let rollTime = data.rollTime;
    let timer = data.timer;

    // 滚动到中奖项
    if (rollCount >= len + prizeIndex) {
      clearInterval(timer);
      that.setData({
        isRolling: false
      });
      wx.showModal({
        title: '恭喜',
        content: '您中了' + gridData[prizeIndex].name,
        showCancel: false
      });
      return;
    }

    // 滚动九宫格
    let index = rollCount % len;
    let item = gridData[index];
    item.selected = true;
    that.setData({
      gridData: gridData
    });
    setTimeout(function() {
      item.selected = false;
      that.setData({
        gridData: gridData
      });
    }, 300);

    // 控制滚动速度
    if (rollCount < len / 2) {
      rollTime += 30;
    } else if (rollCount >= len / 2 && rollCount < len / 4 * 3) {
      rollTime += 50;
    } else {
      rollTime += 80;
    }

    // 更新数据
    rollCount++;
    that.setData({
      rollCount: rollCount,
      rollTime: rollTime
    });

    // 循环滚动
    timer = setTimeout(function() {
      that.roll();
    }, rollTime);
    that.setData({
      timer: timer
    });
  }
})