本文實例為大家分享了微信小程序實現九宮格抽獎的具體代碼，適用于年會抽獎，供大家參考，具體內容如下

效果圖比較卡頓，真實運行效果是旋轉的

用到的素材：

實現步驟：

實現原理

改變每一項的透明度實現選中效果。利用setTimeOut時間使旋轉速度越來越慢。達到慢慢停止的效果。實際應用中可以將9張獎品圖片和中獎項均通過接口返回。以方便獎品的調整。 

1.布局繪制

<view class="container"> 停止位置:<input value='{{luckPosition}}' style="width:100%;text-align:center" bindinput='input' type='number'></input> <view class='frame_view'><view class='frame_row'><image class='frame_item' style='opacity:{{color[0]}}' src='{{images[0]}}'></image><image class='frame_item' style='opacity:{{color[1]}}' src='{{images[1]}}'></image><image class='frame_item' style='opacity:{{color[2]}}' src='{{images[2]}}'></image></view> <view class='frame_row'><image class='frame_item' style='opacity:{{color[7]}}' src='{{images[7]}}'></image><image class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'></image><image class='frame_item' style='opacity:{{color[3]}}' src='{{images[3]}}'></image></view> <view class='frame_row'><image class='frame_item' style='opacity:{{color[6]}}' src='{{images[6]}}'></image><image class='frame_item' style='opacity:{{color[5]}}' src='{{images[5]}}'></image><image class='frame_item' style='opacity:{{color[4]}}' src='{{images[4]}}'></image></view></view></view>

2.數據準備

//計數器var interval = null; //值越大旋轉時間越長 即旋轉速度var intime = 50;  data: { color: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5], //9張獎品圖片 images: ['/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png'],  //確定按鈕 btnconfirm: '/images/dianjichoujiang.png',  //點擊事件 clickLuck:'clickLuck', //中獎位置 luckPosition:0, },

3.顯示界面時慢慢轉動

//進入頁面時緩慢切換 loadAnimation:function (){ var e = this; //初始位置為0 var index = 0; //每1秒鐘切換一次位置 interval = setInterval(function () { if (index > 7) { index = 0; e.data.color[7] = 0.5 } else if (index != 0) { e.data.color[index - 1] = 0.5 } e.data.color[index] = 1 e.setData({ color: e.data.color, }) index++; }, 1000);}

4.停止旋轉

//which為中獎位置 需要停止時調用該方法stop: function (which){ var e = this; //清空計數器 clearInterval(interval); //初始化當前位置 var current = -1; var color = e.data.color; for (var i = 0; i < color.length; i++) { if (color[i] == 1) { current = i; } } //下標從1開始 var index = current + 1;  e.stopLuck(which, index, intime, 10); },  /** * which:中獎位置 * index:當前位置 * time：時間標記 * splittime：每次增加的時間 值越大減速越快 */ stopLuck: function (which, index,time,splittime){ var e = this; //值越大出現中獎結果后減速時間越長 var color = e.data.color; setTimeout(function () { //重置前一個位置 if (index > 7) { index = 0; color[7] = 0.5 } else if (index != 0) { color[index - 1] = 0.5 } //當前位置為選中狀態 color[index] = 1 e.setData({ color: color, }) //如果旋轉時間過短或者當前位置不等于中獎位置則遞歸執行 //直到旋轉至中獎位置 if (time < 400 || index != which){ //越來越慢 splittime++; time += splittime; //當前位置+1 index++; e.stopLuck(which, index, time, splittime); }else{ //1秒后顯示彈窗 setTimeout(function () { if (which == 1 || which == 3 || which == 5 || which == 7) { //中獎 wx.showModal({ title: '提示', content: '恭喜中獎', showCancel: false, success: function (res) { if (res.confirm) {  //設置按鈕可以點擊  e.setData({  btnconfirm: '/images/dianjichoujiang.png',  clickLuck: 'clickLuck',  })  e.loadAnimation(); } } }) } else { //中獎 wx.showModal({ title: '提示', content: '很遺憾未中獎', showCancel: false, success:function(res){ if(res.confirm){  //設置按鈕可以點擊  e.setData({  btnconfirm: '/images/dianjichoujiang.png',  clickLuck: 'clickLuck',  })  e.loadAnimation(); } } }) } }, 1000); } }, time); },