微信小程序 九宫格抽奖

因公司需求要做一个小程序的九宫格抽奖，但是一块又没有合适的插件，于是到网上看到一个，还挺不错的。

效果图

1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴;

2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些.

3.控制转的圈数是data中times参数

4.控制转盘停止的位置（索引）是data中index值，这个根据后端接口返回的索引来赋值

index.wxml

<view class="container-out"><view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view><view class="container-in"><view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};"><image class="award-image" src="{{item.imageAward}}"></image></view><view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">START</view></view></view>

index.wxss

.container-out {height: 600rpx;width: 650rpx;background-color: #b136b9;margin: 100rpx auto;border-radius: 40rpx;box-shadow: 0 10px 0 #871a8e;position: relative;}.container-in {width: 580rpx;height: 530rpx;background-color: #871a8e;border-radius: 40rpx;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}/**小圆球box-shadow: inset 3px 3px 3px #fff2af;*/.circle {position: absolute;display: block;border-radius: 50%;height: 20rpx;width: 20rpx;}.content-out {position: absolute;height: 150rpx;width: 166.6666rpx;background-color: #f5f0fc;border-radius: 15rpx;box-shadow: 0 5px 0 #d87fde;}/**居中 加粗*/.start-btn {position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;border-radius: 15rpx;height: 150rpx;width: 166.6666rpx;background-color: #ffe400;box-shadow: 0 5px 0 #e7930a;color: #f6251e;text-align: center;font-size: 55rpx;font-weight: bolder;line-height: 150rpx;}.award-image {position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;height: 140rpx;width: 130rpx;}

index.js

Page({data: {circleList: [],//圆点数组awardList: [],//奖品数组colorCircleFirst: '#FFDF2F',//圆点颜色1colorCircleSecond: '#FE4D32',//圆点颜色2colorAwardDefault: '#F5F0FC',//奖品默认颜色colorAwardSelect: '#ffe400',//奖品选中颜色indexSelect: 0,//被选中的奖品indexisRunning: false,//是否正在抽奖index:5,//中奖的索引 这个是拿到后端接口后赋的值，第几个奖品times: 3, //转盘转的次数imageAward: ['/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3140835205,15957850&fm=26&gp=0.jpg','/image_search/src=http%3A%2F%%2Ffile%2F09%2F14%2F43f8777c06.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611367449&t=2cbddc7bc57c6ef0a93259ae07ab4977','/image_search/src=http%3A%2F%%2Fpic%2Ftoutiao%2F0803%2Ff26db75f65a134e844dba3039ea30310.jpeg%3Fx-oss-process%3Dimage%2Fresize%2Cw_600%2Cq_60&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611367469&t=5aa3b8663ad973c87975bd525ab6d059','/image_search/src=http%3A%2F%2Fimg.%2Fupload%2F0604%2F10c6fad2080f438bae1ce98b0d07eed2_th.jpg&refer=http%3A%2F%2Fimg.&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611367487&t=1ed8c7dc90490f71d23bd01c2b994c54','/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=300278140,1281156570&fm=26&gp=0.jpg','/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3740520249,3092805081&fm=26&gp=0.jpg','/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1977138633,2141908040&fm=26&gp=0.jpg','/image_search/src=http%3A%2F%2F5b0988e595225.%2Fimages%2F0717%2F89d3acd0e3a74beb9c8d4884df45ce97.jpeg&refer=http%3A%2F%2F5b0988e595225.&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611367545&t=66c93b6725ae705b5ae8bbb7f81754a4',],//奖品图片数组},onLoad: function () {var _this = this;//圆点设置var leftCircle = 7.5;var topCircle = 7.5;var circleList = [];for (var i = 0; i < 24; i++) {if (i == 0) {topCircle = 15;leftCircle = 15;} else if (i < 6) {topCircle = 7.5;leftCircle = leftCircle + 102.5;} else if (i == 6) {topCircle = 15leftCircle = 620;} else if (i < 12) {topCircle = topCircle + 94;leftCircle = 620;} else if (i == 12) {topCircle = 565;leftCircle = 620;} else if (i < 18) {topCircle = 570;leftCircle = leftCircle - 102.5;} else if (i == 18) {topCircle = 565;leftCircle = 15;} else if (i < 24) {topCircle = topCircle - 94;leftCircle = 7.5;} else {return}circleList.push({topCircle: topCircle, leftCircle: leftCircle });}this.setData({circleList: circleList})//圆点闪烁setInterval(function () {if (_this.data.colorCircleFirst == '#FFDF2F') {_this.setData({colorCircleFirst: '#FE4D32',colorCircleSecond: '#FFDF2F',})} else {_this.setData({colorCircleFirst: '#FFDF2F',colorCircleSecond: '#FE4D32',})}}, 500)//奖品item设置var awardList = [];//间距,怎么顺眼怎么设置吧.var topAward = 25;var leftAward = 25;for (var j = 0; j < 8; j++) {if (j == 0) {topAward = 25;leftAward = 25;} else if (j < 3) {topAward = topAward;//166.6666是宽.15是间距.下同leftAward = leftAward + 166.6666 + 15;} else if (j < 5) {leftAward = leftAward;//150是高,15是间距,下同topAward = topAward + 150 + 15;} else if (j < 7) {leftAward = leftAward - 166.6666 - 15;topAward = topAward;} else if (j < 8) {leftAward = leftAward;topAward = topAward - 150 - 15;}var imageAward = this.data.imageAward[j];awardList.push({topAward: topAward, leftAward: leftAward, imageAward: imageAward });}this.setData({awardList: awardList})},//开始游戏startGame: function () {if (this.data.isRunning) returnthis.setData({isRunning: true})var _this = this;var indexSelect = 0var i = 0;var timer = setInterval(function () {indexSelect++;//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度i += 30;if (i > _this.data.times * 8 * 30 + _this.data.index * 30 - 30) {// if (i > 1000) {//去除循环clearInterval(timer)//获奖提示wx.showModal({title: '恭喜您',content: '获得了索引为' + (_this.data.index) + "的彭于晏",showCancel: false,//去掉取消按钮success: function (res) {if (res.confirm) {_this.setData({isRunning: false})}}})}indexSelect = indexSelect % 8;_this.setData({indexSelect: indexSelect})}, (100 + i))}})

以上就是所有的代码了，根据项目需求自作调整