本文實例為大家分享了微信小程序實現九宮格抽獎的具體代碼，適用于年會抽獎，供大家參考，具體內容如下
效果圖比較卡頓，真實運行效果是旋轉的
用到的素材：
實現步驟：
實現原理
改變每一項的透明度實現選中效果。利用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); },5可以點擊按鈕后停止抽獎 或者點擊開始抽獎停止一段時候后自動停止
//模擬網絡請求時間 設為兩秒 var stoptime = 2000; setTimeout(function () { e.stop(e.data.luckPosition); }, stoptime)gitub地址：微信小程序九宮格抽獎
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
