멀티 그리드 복권 활동 구현

小云云원래의: 2017-12-07 15:31:232624검색

WeChat 미니 프로그램이 점점 더 인기를 얻고 있는 만큼, WeChat 미니 프로그램과 관련된 튜토리얼도 계속해서 공유하고 있습니다. 이 글에서는 WeChat 미니 프로그램의 멀티 제곱 복권 기능을 계속해서 공유하겠습니다.

먼저 효과를 살펴보세요.

먼저 2개 이상의 원을 회전시킨 다음 복권을 그리는 것이 아이디어입니다. 그리드 이동은 setTimeout을 사용하여 서로 다른 시간 간격으로 실행되도록 한 다음 생성합니다. 이동 속도의 영향

자, 코드를 살펴보겠습니다

첫 번째는 WXML입니다. (여기서의 판단은 다소 복잡할 수 있으므로 순서대로 주의 깊게 읽어 보십시오. 5번째와 11번째 그리드는 다른 휴대폰에서 표시하는 데 문제가 있기 때문입니다. 화면 크기가 있으니 다시 해보세요 판단)

<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;
}

var time = null;//setTimeout的ID，用clearTimeout清除
Page({
 data: {
 box: [{
  name:&#39;100积分&#39;
 }, {
  name: &#39;10元优惠券\n满100可用&#39;
 }, {
  name: &#39;60积分&#39;
 }, {
  name: &#39;30积分&#39;
 }, {
  name: &#39;50积分&#39;
 }, {
  name: &#39;30元优惠券\n满120可用&#39;
 }, {
  name: &#39;100积分&#39;
 }, {
  name: &#39;200积分&#39;
 }, {
  name: &#39;10积分&#39;
 }, {
  name: &#39;50积分&#39;
 }, {
  name: &#39;40积分&#39;
 }, {
  name: &#39;50优惠券满500可用&#39;
 }, {
  name: &#39;60积分&#39;
 }, {
  name: &#39;70积分&#39;
 }],
 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(&#39;prize:&#39;+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: &#39;&#39;,
  content: &#39;您的抽奖次数已经没有了&#39;,
  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 () {
 
 }
})

멀티 그리드 복권 활동 구현

관련 기사