FWQ
多宫格抽奖活动的实现
现在微信小程序越来越火,我们也在持续不断的为大家带来微信小程序相关教程分享,本文我们继续为大家分享微信小程序实现多宫格抽奖功能。 首先看效果: 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然后产生运动快慢的效果 好了,上代码 首先是WXML(这里面的判断可能有些绕,仔细按顺序看,因其第五个和第十一个格子在不同手机屏幕大小上的显示有问题,所以再次给它们判断了一下) <view> <view>0&&index3&&index7&&index11&&index <text>6?"line-height:40rpx;margin-top:10rpx;":"line-height:100rpx;"}}'>{{item.name}}</text> </view> <view> <text>点击抽奖</text> <text>您还有<text>{{howManyNum}}</text>次抽奖机会</text> </view></view><view></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;*/…