上图
话不多说直接上图，抽奖是顺时针又快变慢（还原抽奖的动画）进行抽奖，抽奖的几率都是随机
源码
接下来展示的就是微信小程序中的九宫格抽奖
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; //抽奖过程KEYComponent({/*** 组件的属性列表*/properties: {},/*** 关闭组件样式隔离*/options: {styleIsolation: 'apply-shared'},/*** 组件的初始数据*/data: {// 奖品参数信息prizeList: [{id: '001', index: 1, imgsrc: '/18b925338313c77ee90c6a0a2f052a7988e10ce515ca7-T4bMZ0_fw658', prizeName: '谢谢参与' },{id: '002', index: 2, imgsrc: '/2acfd641286f1a7e4050ca13e207c1d2fc2cbf5f12ca2-W5O1vm_fw658', prizeName: '金币 x20' },{id: '003', index: 3, imgsrc: '/72138f8f82134a9099eaa02d5d81fa738519716021e4c-idXlQk_fw658', prizeName: '火箭 x1' },{id: '004', index: 4, imgsrc: '/96e0a27d3a6b25dacd7157db6879b63be9e1addd126ac-sMVvOt_fw658', prizeName: '神秘礼盒 x1' },{id: '005', index: 5, imgsrc: '/aa694a1e151f2cb8d8583eee9d1cbf0342b5577b953c-O0MFoR_fw658', prizeName: '水晶血瓶 x1' },{id: '006', index: 6, imgsrc: '/2fe60709c9479b41ec3eef7fff1101f683b4ad89254af-HNdtDR_fw658', prizeName: '金币 x10' },{id: '007', index: 7, imgsrc: '/407d1f6d9aa47e757994d9474dba7257c4c73bd11123a-5juBN1_fw658', prizeName: '水晶钻石 x5' },{id: '008', index: 8, imgsrc: '/513f6f7d9f323e7cc3e252444237a84b52a98890c375-LGfXRi_fw658', prizeName: '水晶盒 x1' },],drawIndex: null, //抽奖过程KEYprizeResult: null, //抽奖结果KEYprizeName: 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; //抽奖过程KEYthis.setData({drawIndex: null, // 清空抽奖过程KEYprizeResult: null, // 清空抽奖结果KEYprizeName: null, // 清空抽奖结果KEY对应的奖品名称showAgain: false, // 是否抽奖后显示再抽一次按钮awardImage: '', // 清空奖品展示的图片awardName: '' // 清空奖品的展示名称});},// 关闭奖品弹簧closePopup(){this.setData({isShowLuck: false})}}})
全部源码看Github仓库 → 微信九宫格抽奖源码
如果喜欢的小伙伴可以去仓库Fock一下 项目： 微信小程序云音乐 + 博客开发
直接部署到本地电脑进行体验，有对应的部署文档，觉得不错的给个小星星star，谢谢~
