了解到要做的活动表现形式为?，首先当然是google、百度跑跑找找demo，看下人家是怎么实现的。
剖析了一波，划重点（要考的）：
css的 background-position属性是设置背景图像的起始位置，那么我们控制背景图在0-3秒的时间内显示不同的位置，再加上过渡动画就可以达到? 旋转的效果
实现底部滚动停止后显示弹窗且跟后端返回的中奖码一致。
完整的实现效果在这里：
微信小程序版
支付宝小程序版（看着效果卡顿，真机正常）
注意两个点：
- 旋转的背景图是雪碧图。我这里用到的是这张（https://qiniu-image.qtshe.com/20181113wheels.png）可供参考
- 控制好图的位移单位，需要计算下，这样才可以让后端返回的值与你的图相匹配。我这里是15个icon所以计算方式如下
<view class="box-image" style=" background: url('https://qiniu-image.qtshe.com/20181113wheels.png'); background-position-y: {{isStart ? ((16 - item) * 100) + 1500 + 'rpx' : 0}}; background-size: 100% 100%; transition-property: {{isStart ? 'all' : 'none'}}; transition-delay: {{(index + 1) * 100 + 'ms'}}; transition-duration: 3.5s;"> </view>
这里可以封装成自定义组件，传入图片以及数量即可。后面如果有再用到 我会封装下再发出来。
最后说下弹窗显示的图的匹配方法,根据图片大小计算，比较麻烦：
axml
<view class="ci-wrapper"> <view a:if="{{icontype ==='nomal'}}" class="icon-default icon-nomal" style=" background-position-y: {{(-24 - 117.86 * (typeId - 1)) + 'rpx'}};"></view> <view a:else class="icon-default icon-fade" style=" background-position-y: {{(-20 - 110.73 * (typeId - 1)) + 'rpx'}}; "></view> </view>
acss
.icon-default { width: 70rpx; height: 70rpx; background-repeat: no-repeat; } .icon-nomal { background-image: url(https://qiniu-image.qtshe.com/20181113wheels.png); background-position-x: -17rpx; background-size: 100rpx 1768rpx } .icon-fade { background-image: url(https://qiniu-image.qtshe.com/20181113wheels_fade.png); background-size: 110rpx 1661rpx; background-position-x: -18rpx; }
Js
Component({ props: { icontype: 'nomal', iconid: 1 }, data: { nomalOrigin: { x: -17, y: -24 }, fadeOrigin: { x: -17, y: -24 }, typeId: 1 } })
以上就是一个完整小程序的? 实现方案，有什么优化点大家可以指出来，后续会整理一下出个文件拷贝就可使用。
