最近閑來無事,做了一個(gè)多宮格抽獎(jiǎng)的例子,有什么需要改進(jìn)或者錯(cuò)誤的地方,請留言,謝謝
首先看效果
思路是先讓其轉(zhuǎn)動2圈多,然后再進(jìn)行抽獎(jiǎng),格子運(yùn)動用的是setTimeout,讓其運(yùn)行的時(shí)間間隔不一樣,然后產(chǎn)生運(yùn)動快慢的效果
好了,上代碼
首先是WXML(這里面的判斷可能有些繞,仔細(xì)按順序看,因其第五個(gè)和第十一個(gè)格子在不同手機(jī)屏幕大小上的顯示有問題,所以再次給它們判斷了一下)
<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">點(diǎn)擊抽獎(jiǎng)</text> <text class="howMany">您還有<text class="howMany_num" >{{howManyNum}}</text>次抽獎(jiǎng)機(jī)會</text> </view> </view>