【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）

上图

话不多说直接上图，抽奖是顺时针又快变慢（还原抽奖的动画）进行抽奖，抽奖的几率都是随机

源码

接下来展示的就是微信小程序中的九宫格抽奖

	说明
适用范围	抽奖逻辑只是原生JS，通过数据进行驱动，因此仍然适用于主流框架Vue，React等
设计思想	数据驱动，可作为组件复用（奖品信息对接数据库，后台调试奖品信息，前端拿到后端数据直接展示即可）

---

wxml：

<!-- 抽奖区域 -->
<view class="box">
	<view bindtap="startDraw" class="list {{drawIndex > 0 ? 'grey' : ''}}">抽奖</view>
	<block wx:for="{{prizeList}}" wx:key="id">
		<view class="list {{drawIndex == item.index ? 'change_in' : ''}}">
			<view class="list_t"><image src="{{item.imgsrc}}" mode="aspectFit"></image></view>
			<view class="list_b">{{item.prizeName}}</view>
		</view>
	</block>
</view>

<button class="again_btn"  bindtap="againBtn">再抽一次</button>

<!-- 奖品弹窗 -->
<view class="luck-display" wx:if="{{isShowLuck}}">
  <view class="luck-mask" bindtap="closePopup"></view>
  <view class="luck-popup">
  <view class="luck-close" bindtap="closePopup">
    <i class="iconfont icon-shanchu"></i>
  </view>
    <view class="luck-image">
      <image src="{{awardImage}}" mode="aspectFit"></image>
    </view>
    <view class="luck-text">{{awardName}}</view>
  </view>
</view>
 

js：

let timer; 
let onDrawing = false;  // 是否可进行抽奖标识，默认为false可进行抽奖
let drawIndex = 0; //抽奖过程KEY

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

    /**
   * 关闭组件样式隔离
   */
  options: {
    styleIsolation: 'apply-shared'
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 奖品参数信息
    prizeList: [
      { id: '001', index: 1, imgsrc: 'https://hbimg.huabanimg.com/18b925338313c77ee90c6a0a2f052a7988e10ce515ca7-T4bMZ0_fw658', prizeName: '谢谢参与' },
      { id: '002', index: 2, imgsrc: 'https://hbimg.huabanimg.com/2acfd641286f1a7e4050ca13e207c1d2fc2cbf5f12ca2-W5O1vm_fw658', prizeName: '金币 x20' },
      { id: '003', index: 3, imgsrc: 'https://hbimg.huabanimg.com/72138f8f82134a9099eaa02d5d81fa738519716021e4c-idXlQk_fw658', prizeName: '火箭 x1' },
      { id: '004', index: 4, imgsrc: 'https://hbimg.huabanimg.com/96e0a27d3a6b25dacd7157db6879b63be9e1addd126ac-sMVvOt_fw658', prizeName: '神秘礼盒 x1' },
      { id: '005', index: 5, imgsrc: 'https://hbimg.huabanimg.com/aa694a1e151f2cb8d8583eee9d1cbf0342b5577b953c-O0MFoR_fw658', prizeName: '水晶血瓶 x1' },
      { id: '006', index: 6, imgsrc: 'https://hbimg.huabanimg.com/2fe60709c9479b41ec3eef7fff1101f683b4ad89254af-HNdtDR_fw658', prizeName: '金币 x10' },
      { id: '007', index: 7, imgsrc: 'https://hbimg.huabanimg.com/407d1f6d9aa47e757994d9474dba7257c4c73bd11123a-5juBN1_fw658', prizeName: '水晶钻石 x5' },
      { id: '008', index: 8, imgsrc: 'https://hbimg.huabanimg.com/513f6f7d9f323e7cc3e252444237a84b52a98890c375-LGfXRi_fw658', prizeName: '水晶盒 x1' },
    ],

    drawIndex: null, //抽奖过程KEY
    prizeResult: null, //抽奖结果KEY
    prizeName: null, //抽奖结果KEY对应的奖品名称
    isShowLuck: false,  // 是否显示奖品弹窗，默认false不显示
    showAgain: false, //是否抽奖后显示再抽一次按钮
    awardImage: '',  // 弹窗展示的奖品照片
    awardName:'',  // 弹窗展示的奖品名字
  },

  /**
   * 组件的方法列表
   */
  methods: {

    //抽奖操作
    startDraw() {
      if (onDrawing) {
        return;
      } else {
        onDrawing = true;
      }

      clearInterval(timer);
      timer = setInterval(()=>{
        this.changePrize()
      }, 80);

      // 随机将品池
      let random = Math.floor(Math.random() * this.data.prizeList.length)

      let res = {
        stutus: 1,
        prizeResult: this.data.prizeList[random].index,
        prizeName: this.data.prizeList[random].prizeName,
      }

      if (res.stutus == 1) {
        setTimeout( ()=> {
          clearInterval(timer);
          timer = setInterval(()=>{
            this.changePrize()
          }, 200);

          setTimeout( ()=> {
            clearInterval(timer);
            timer = setInterval(()=>{
              this.changePrize()
            }, 420);
            setTimeout( () => {
              this.setData({
                prizeResult: res.prizeResult,
                prizeName: res.prizeName,
              });
            }, 1000)
          }, 1200)
        }, 1800)
      }
    },

    //抽奖过程奖品切换
    changePrize() {
      drawIndex++;
      drawIndex = drawIndex > 8 ? 1 : drawIndex;

      this.setData({
        drawIndex: drawIndex
      });

      if (this.data.prizeResult == drawIndex) {
        clearInterval(timer);
        let currentAward = this.data.prizeList[this.data.prizeResult - 1]
        this.setData({
          showAgain: true,
          isShowLuck: true,
          awardImage: currentAward.imgsrc,
          awardName: currentAward.prizeName
        });
      }
    },

    //点击再抽一次按钮
    againBtn() {
      onDrawing = false;
      drawIndex = 0; //抽奖过程KEY

      this.setData({
        drawIndex: null, // 清空抽奖过程KEY
        prizeResult: null, // 清空抽奖结果KEY
        prizeName: null, // 清空抽奖结果KEY对应的奖品名称
        showAgain: false, // 是否抽奖后显示再抽一次按钮
        awardImage: '',  // 清空奖品展示的图片
        awardName: '' // 清空奖品的展示名称
      });
    },

    // 关闭奖品弹簧
    closePopup(){
      this.setData({
        isShowLuck: false
      })
    }
  }
})

全部源码看Github仓库 → 微信九宫格抽奖源码

---

如果喜欢的小伙伴可以去仓库Fock一下 项目： 微信小程序云音乐 + 博客开发

直接部署到本地电脑进行体验，有对应的部署文档，觉得不错的给个小星星star，谢谢~