最近閑來無事,做了一個(gè)多宮格抽獎(jiǎng)的例子,有什么需要改進(jìn)或者錯(cuò)誤的地方,請留言,謝謝

首先看效果

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

思路是先讓其轉(zhuǎn)動2圈多,然后再進(jìn)行抽獎(jiǎng),格子運(yùn)動用的是setTimeout,讓其運(yùn)行的時(shí)間間隔不一樣,然后產(chǎn)生運(yùn)動快慢的效果

好了,上代碼

首先是WXML(這里面的判斷可能有些繞,仔細(xì)按順序看,因其第五個(gè)和第十一個(gè)格子在不同手機(jī)屏幕大小上的顯示有問題,所以再次給它們判斷了一下)

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

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