微信小程序多宮格抽獎(jiǎng)

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

首先看效果

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

好了，上代碼

首先是WXML（這里面的判斷可能有些繞，仔細(xì)按順序看，因其第五個(gè)和第十一個(gè)格子在不同手機(jī)屏幕大小上的顯示有問(wè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ī)會(huì)</text>
    </view>
</view>
        
		

        		
網(wǎng)友評(píng)論
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		學(xué)習(xí)是年輕人改變自己的最好方式