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

之前试用了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;
}

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

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