Implementation of multi-grid lottery activities

Nowadays, WeChat mini programs are becoming more and more popular, and we are constantly sharing tutorials related to WeChat mini programs. In this article, we continue to share with you the multi-square lottery function of WeChat mini programs.

First look at the effect:

The idea is to let it rotate for more than 2 turns, and then draw a lottery. The grid movement uses setTimeout and let it run. The time intervals are different, and then the effect of the speed of movement is produced

Okay, the above code

The first is WXML (the judgment here may be a bit confusing, read it carefully in order, because the fifth There is a problem with the display of the first and eleventh grid on different mobile phone screen sizes, so I judged them again)

<view class="box">
 <view class="boxsub {{luckynum==index?&#39;luck&#39;:&#39;&#39;}}" wx:for=&#39;{{box}}&#39; style="{{index>0&&index<4?&#39;top:0;left:&#39;+index*140+&#39;rpx;&#39;:(index>3&&index<8?&#39;right:0;
 top:&#39;+((index-4)*100)+&#39;rpx;&#39;:(index>7&&index<12?&#39;bottom:0;right:&#39;+(index-7)*140+&#39;rpx;&#39;:(index>11&&index<14?&#39;left:0;bottom:&#39;+(index-11)*100+&#39;rpx;&#39;:&#39;&#39;)))}} 
 {{index==&#39;4&#39;?&#39;top:0;&#39;:&#39;&#39;}} {{index==&#39;11&#39;?&#39;left:0;&#39;:&#39;&#39;}} " wx:key=&#39;&#39;>
   <text class=&#39;boxcontent&#39; style=&#39;{{item.name.length>6?"line-height:40rpx;margin-top:10rpx;":"line-height:100rpx;"}}&#39;>{{item.name}}</text> 
  
 </view>
 <view class="lucky" catchtap="luckyTap">
  <text class="taplucky">点击抽奖</text>
  <text class="howMany">您还有<text class="howMany_num" >{{howManyNum}}</text>次抽奖机会</text>
 </view>
</view>
<view class="explain">

</view>

WXSS：

.box{
 margin:20rpx 25rpx;
 height: 400rpx;
 width: 698rpx;
 /*border:1px solid #ddd;*/
 position: relative;
 /*box-sizing: border-box;*/
}
.boxsub{
 width: 140rpx;
 height: 100rpx;
 /*border: 1px solid #f00;*/
 box-sizing: border-box;
 position: absolute;
 background: #ff6100;
 border: 1rpx solid #fff;
 
}
.boxcontent{
 text-align: center;
 font-size: 26rpx;
 display: block;
 color: #fff;
}
.lucky{
 width: 300rpx;
 height:130rpx;
 background:#ff6100;/* #ff6100;007FFF*/
 position: absolute;
 left: 0;
 bottom: 0;
 right: 0;
 top: 0rpx;
 margin: auto;
}

.lucky:active{
 opacity: 0.7;
}
.taplucky{
 display: block;
 text-align: center;
 font-size: 30rpx;
 line-height: 50rpx;
 height: 50rpx;
 color: #fff;
 margin-top: 20rpx;
}
.howMany{
 display: block;
 text-align: center;
 font-size: 26rpx;
 color: #fff;
 line-height: 40rpx;
 height: 40rpx;
}
.howMany_num{
 color:#007FFF;
 font-size:32rpx;
 line-height:40rpx;
 padding:0 10rpx;
}
.luck{
 opacity: 0.5;
 background: #ff6100;
}

JS

##

var time = null;//setTimeout的ID，用clearTimeout清除
Page({
 data: {
 box: [{
  name:'100积分'
 }, {
  name: '10元优惠券\n满100可用'
 }, {
  name: '60积分'
 }, {
  name: '30积分'
 }, {
  name: '50积分'
 }, {
  name: '30元优惠券\n满120可用'
 }, {
  name: '100积分'
 }, {
  name: '200积分'
 }, {
  name: '10积分'
 }, {
  name: '50积分'
 }, {
  name: '40积分'
 }, {
  name: '50优惠券满500可用'
 }, {
  name: '60积分'
 }, {
  name: '70积分'
 }],
 luckynum:0,//当前运动到的位置，在界面渲染
 howManyNum:10,//抽奖的剩余次数
 content:{
  index: 0, //当前转动到哪个位置，起点位置
  count: 0, //总共有多少个位置
  speed: 50, //初始转动速度
  cycle: 3*14, //转动基本次数：即至少需要转动多少次再进入抽奖环节，这里设置的是转动三次后进入抽奖环节
 },
 prize:0,//中奖的位置
 luckytapif:true//判断现在是否可以点击
 },
 //点击抽奖
 luckyTap:function(){
 var i=0,
  that=this,
  howManyNum = this.data.howManyNum,//剩余的抽奖次数
  luckytapif = this.data.luckytapif,//获取现在处于的状态
  luckynum = this.data.luckynum,//当前所在的格子
  prize =Math.floor(Math.random()*14) ;//中奖序号,随机生成
 if (luckytapif && howManyNum>0){//当没有处于抽奖状态且剩余的抽奖次数大于零，则可以进行抽奖
  console.log('prize:'+prize);
  this.data.content.count=this.data.box.length;
  this.setData({
  howManyNum:howManyNum-1//更新抽奖次数
  });
  this.data.luckytapif=false;//设置为抽奖状态
  this.data.prize = prize;//中奖的序号
  this.roll();//运行抽奖函数
 } else if (howManyNum == 0 && luckytapif){
  wx.showModal({
  title: '',
  content: '您的抽奖次数已经没有了',
  showCancel:false
  })
 }
 },
//抽奖
 roll:function(){
 var content=this.data.content,
  prize = this.data.prize,//中奖序号
  that=this;
 if (content.cycle - (content.count-prize)>0){//最后一轮的时间进行抽奖
  content.index++;
  content.cycle--;
  this.setData({
  luckynum: content.index%14 //当前应该反映在界面上的位置
  });
  setTimeout(this.roll, content.speed);//继续运行抽奖函数
 }else{
  if (content.index < (content.count*3 + prize)){//判断是否停止

  content.index++; 
  content.speed += (550 /14);//最后一轮的速度，匀加速，最后停下时的速度为550+50
  this.data.content=content;
  this.setData({
   luckynum: content.index % 14
  });
  console.log(content.index, content.speed);//打印当前的步数和当前的速度
  setTimeout(this.roll,content.speed);
  }else{
  //完成抽奖，初始化数据
  console.log(&#39;完成&#39;);
  content.index =0;
  content.cycle = 3 * 14;
  content.speed = 50;
  this.data.luckytapif = true;
  clearTimeout(time);
  wx.showModal({
   title: &#39;&#39;,
   content: &#39;恭喜你抽到了&#39;+that.data.box[prize].name,
   showCancel:false
  })
  }
 }
 },
 onLoad: function (options) {
 
 },
 onReady: function () {
 
 },
 onShow: function () {
 
 },
 onHide: function () {
 
 },
 onUnload: function () {
 
 }
})

Related recommendations:

How to implement the image enlargement preview function in the WeChat applet

WeChat applet-imitation Hema Xiansheng

The most complete WeChat Mini Program Project Example

The above is the detailed content of Implementation of multi-grid lottery activities. For more information, please follow other related articles on the PHP Chinese website!