最近闲来无事，做了一个多宫格抽奖的例子，有什么需要改进或者错误的地方，请留言，谢谢
首先看效果
思路是先让其转动2圈多，然后再进行抽奖，格子运动用的是setTimeout，让其运行的时间间隔不一样，然后产生运动快慢的效果
好了，上代码
首先是WXML（这里面的判断可能有些绕，仔细按顺序看，因其第五个和第十一个格子在不同手机屏幕大小上的显示有问题，所以再次给它们判断了一下）
<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>
延伸阅读
- ssh框架
2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁
2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】
2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词
2017-07-26
- 从栈不平衡问题 理解 calling convention
2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明
2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解
2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析
2017-07-26
- 集合结合数据结构来看看(二)
2017-07-26
学习是年轻人改变自己的最好方式