如何实现一个小程序版本的老虎机

运营：咱们最近需要拉新用户，做个简单点的活动，就老虎机形式吧。

产品：老虎机的话比较简单，网上demo那么多随便拷贝拷贝就能用啦。

开发：来来来，你来做。

进入正题：

网上老虎机的插件挺多的，实现原理也各不一样， 然后这里主要提下自己当初做老虎机抽奖活动时想到的一个原理：

划重点啦：

css的 background-position属性是设置背景图像的起始位置，那么我们控制背景图在0-3秒的时间内显示不同的位置，再加上过渡动画就可以达到老虎机旋转的效果

第一个版本的在 这里 vue的版本 看下效果视频（第二个版本） 视频转的gif有十多兆，放这里有点卡。就上传视频了。 视频效果 该版本定时4秒停再弹窗，比较突兀，未做到老虎机底部滚动停止后再显示弹窗。

今天要说的是第三种方案（实现底部滚动停止后显示弹窗且跟后端返回的中奖码一致） 直接上代码

WXML

<view class="box-container">
  <view class="box-tips">{
   {boxTips}}</view>
  <view class="wheel-boxs">
    <view class="box-list" wx:for="{
    {boxStatus}}" wx:key="index">
      <view class="box-text" wx:if="{
    {!isStart}}">{
   {item}}</view>
      <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>
     {
   {item}}
    </view>
    </view>
  <view class="start-box">
   <form bindsubmit="startDraw" report-submit="true" wx:if="{
    {pageVo.remainCount !== 0}}">
       <button class="start-draw" formType="submit" />
   </form>