現在、WeChat ミニ プログラムはますます人気が高まっており、WeChat ミニ プログラムに関連するチュートリアルを常に共有しています。この記事では、引き続き WeChat ミニ プログラムのマルチ スクエア宝くじ機能を共有します。
まずはエフェクトを見てみましょう:
このアイデアは、最初に 2 円以上回転させてから、抽選を引くことです。グリッドの移動は setTimeout を使用して、異なる時間間隔で実行し、その後生成します。移動速度の影響
さて、コードに移りましょう
最初は WXML です (ここでの判断は少し混乱するかもしれません。順番に注意深く読んでください。5 番目と 11 番目のグリッドは、異なる携帯電話の画面に表示する際に問題があるためです)サイズが違うので、もう一度教えてください 判断)
<view class="box"> <view class="boxsub {{luckynum==index?'luck':''}}" wx:for='{{box}}' style="{{index>0&&index<4?'top:0;left:'+index*140+'rpx;':(index>3&&index<8?'right:0; top:'+((index-4)*100)+'rpx;':(index>7&&index<12?'bottom:0;right:'+(index-7)*140+'rpx;':(index>11&&index<14?'left:0;bottom:'+(index-11)*100+'rpx;':'')))}} {{index=='4'?'top:0;':''}} {{index=='11'?'left:0;':''}} " wx:key=''> <text class='boxcontent' style='{{item.name.length>6?"line-height:40rpx;margin-top:10rpx;":"line-height:100rpx;"}}'>{{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('完成'); content.index =0; content.cycle = 3 * 14; content.speed = 50; this.data.luckytapif = true; clearTimeout(time); wx.showModal({ title: '', content: '恭喜你抽到了'+that.data.box[prize].name, showCancel:false }) } } }, onLoad: function (options) { }, onReady: function () { }, onShow: function () { }, onHide: function () { }, onUnload: function () { } })
関連おすすめ:
WeChatアプレットはどうですか 画像拡大プレビューを実装してください関数
WeChat ミニ プログラム - Imitation Hema Fresh
最も完全な WeChat ミニ プログラム プロジェクトの例
以上がマルチグリッド抽選活動の実施の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ホットトピック









