小程序 实现老虎机抽奖 - 可以点击N次，试用各种机型，不会产生误差

先看效果图：
点击抽奖，就滚动到后端返回对应的数字，试用各种机型

之前试用了background-position的方式去改变数字的背景位置，发奖在小程序使用rpx单位的情况下，会产生误差，且不适配各种机型，于是经过大佬的请教下，改成使用transform: rotateX的方试，话不多说，先上代码

axml：

<view class="content">
  <view class="num-scroll">
    <view class="animationImg">
      <view class="num num1">
        <view class="item-wrap" style=" transform: rotateX({{animation0}}deg);  transition-duration:5s;transition-delay:0s;">
          <view class="item" a:for="{{[0,1,2,3,4,5,6,7,8,9]}}" style="background-image: url(../../img/{{item}}.png);
                transform:rotateX({{36*item - 100}}deg) translateZ({{125}}px);">
          </view>
        </view>
      </view>
      <view class="num num2">
        <view class="item-wrap" style=" transform: rotateX({{animation1}}deg);  transition-duration:6s;transition-delay:0.4;">
          <view class="item" a:for="{{[0,1,2,3,4,5,6,7,8,9]}}" style="background-image: url(../../img/{{item}}.png);
                transform:rotateX({{36*item - 100}}deg) translateZ({{125}}px);">
          </view>
        </view>
      </view>
      <view class="num num3">
        <view class="item-wrap" style=" transform: rotateX({{animation2}}deg);  transition-duration:7s;transition-delay:0.8s;">
          <view class="item" a:for="{{[0,1,2,3,4,5,6,7,8,9]}}" style="background-image: url(../../img/{{item}}.png);
                transform:rotateX({{36*item - 100}}deg) translateZ({{125}}px);">
          </view>
        </view>
      </view>
    </view>
    <view class="btn">
      <button onTap="startAnimation" class="getAuthorize" hover-class="btn-hover"></button>
    </view>
  </view>
</view>

js：

var drawCnt = 0; // 计数器，每抽一次奖自增1
Page({
  data: {
    animation0: 172,
    animation1: 172,
    animation2: 172
  },
  //点击开始按钮，开始滚动
  async startAnimation() {
    var str = '123';
    var num1 = str.slice(0, 1);
    var num2 = str.slice(1, 2);
    var num3 = str.slice(2, 3);
    this.setData({
      animation0: 720 * (drawCnt + 1) + 172 + (8 - num1) * 36,
      animation1: 720 * (drawCnt + 1) + 172 + (8 - num2) * 36,
      animation2: 720 * (drawCnt + 1) + 172 + (8 - num3) * 36,
    })
    drawCnt++;
  },
});

acss：

.content {
  width: 100%;
  height: 100%;
  padding-bottom: 60rpx;
  background: linear-gradient(0deg, rgba(254, 146, 56, 1) 0%, rgba(238, 44, 40, 1) 99%);
  overflow: hidden;
}

.content .num-scroll {
  width: 670rpx;
  height: 630rpx;
  background: url(https://phwealth.phfund.com.cn/phwealth-stg/upload/images/1598601015135.png) no-repeat;
  background-size: 100% 100%;
  box-shadow: 0px 2rpx 0px 0px rgba(255, 208, 127, 1);
  border-radius: 40rpx;
  margin: 70rpx auto 0;
  overflow: hidden;
  position: relative;
}

.num-scroll .animationImg {
  width: 520rpx;
  height: 92rpx;
  display: flex;
  margin: 180rpx auto 0;
}

.animationImg .num {
  width: 60rpx;
  height: 80rpx;
  background-size: 100%;
  background-color: transparent;
  transition-property: background-position-y;
  transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, .9);
  overflow: hidden;
}

.item-wrap{
  width: 60rpx;
  height: 80rpx;
  background-color: transparent;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation-timing-function: ease;
  backface-visibility:hidden;
}

.item{
  width: 60rpx;
  height: 80rpx;
  background: url(https://phwealth.phfund.com.cn/phwealth-stg/upload/images/1598601045235.png);
  background-color: transparent;
  overflow: hidden;
  background-size: 100%;
  position: absolute;
  transform-origin: center;
  backface-visibility:hidden;
}

.num1 {
  transition-delay: 0s;
  transition-duration: 5s;
  margin-left: 60rpx;
}

.num2 {
  transition-delay: 0.5s;
  transition-duration: 5s;
  margin-left: 109rpx;
}

.num3 {
  transition-delay: 1s;
  transition-duration: 5s;
  margin-left: 113rpx;
}

.num-scroll .btn {
  width: 630rpx;
  height: 119rpx;
  background: url(https://phwealth.phfund.com.cn/phwealth-stg/upload/images/1598601029084.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 470rpx;
  left: 30rpx;
}
.num-scroll .getAuthorize {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
}

数字图片，下载下来放文件路径即可

以上就是完整是实现小程序老虎机抽奖功能，如有更好的方法，欢迎留言评论
本文章纯属原创，转载请注明出处