一、效果图：

二、说明 

很简单的三列数字在Y轴旋转，然后将三列数字布局在一个老虎机的背景图上，点击按钮触发旋转事件，旋转到哪个数字停下来可以设置，可以由后端传回获奖数字。

三、代码

<template>
  <div class="page">
    <div class="slot-machine">
      <img class="back-slot" mode="widthFix" src="https://img-blog.csdnimg.cn/2022010610424153423.jpeg" >
      <div class="mp-slot">
        <div class="mp-slot-box" >
          <div v-for="(item,some) in num" class="slot-group" :key="some" :style="{transform: 'translateY('+transY1+'px)'}">
            <div class="slot-item">{{item}}</div>
          </div>
        </div>

        <div class="mp-slot-box" >
          <div v-for="(item,some) in num" class="slot-group" :key="some" :style="{transform: 'translateY('+transY2+'px)'}">
            <div class="slot-item">{{item}}</div>
          </div>
        </div>

        <div class="mp-slot-box" >
          <div v-for="(item,some) in num" class="slot-group" :key="some" :style="{transform: 'translateY('+transY3+'px)'}">
            <div class="slot-item">{{item}}</div>
          </div>
        </div>
      </div>
    </div>
    <button @click="start" class="press" :style="{opacity: changeColor}"></button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        num: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,0],
        height: 95,          // 单个数字高度
        len: 10,             // 单个项目数字个数
        transY1: 0,          // 第一列初始位置
        num1: 3,             // 第一列结束数字
        transY2: 0,          // 第二列初始位置
        num2: 3,             // 第二列结束数字
        transY3: 0,          // 第三列初始位置
        num3: 3,             // 第三列结束数字
        transY4: 0,          // 第四列初始位置
        num4: 3,             // 第四列结束数字
        speed: 24,           // 速度
        changeColor: 1
      }
    },
    onLoad () {
    },
    onShow () {

    },
    methods: {

      start () {
        this.changeColor = 0.1
        let { isStart, len, height, transY1, transY2, transY3, transY4, speed, num1, num2, num3, num4, endCallBack } = this
        if (isStart) return
        this.isStart = true
        const totalHeight = height * len
        const sRange = Math.floor(Math.random() * 2 + 2)
        const halfSpeed = speed / 2
        const endDis1 = num1 == 0 ? 10 * height : num1 * height
        const endDis2 = num2 == 0 ? 10 * height : num2 * height
        const endDis3 = num3 == 0 ? 10 * height : num3 * height
        const endDis4 = num4 == 0 ? 10 * height : num4 * height
        let i1 = 1; let i2 = 1; let i3 = 1; let i4 = 1

        this.timer = setInterval(() => {
          if (i1 <= sRange) {
            transY1 -= speed
            if (Math.abs(transY1) > totalHeight) {
              transY1 += totalHeight
              i1++
            }
          } else if (i1 > sRange && i1 < sRange + 2) {
            transY1 -= halfSpeed
            if (Math.abs(transY1) > totalHeight) {
              transY1 += totalHeight
              i1++
            }
          } else {
            if (transY1 == endDis1) return
            let dropSpeed = (endDis1 + transY1) / halfSpeed
            dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < 1 ? 1 : dropSpeed
            transY1 -= dropSpeed
            transY1 = Math.abs(transY1) > endDis1 ? transY1 = -endDis1 : transY1
          }

          this.timer1 = setTimeout(() => {
            if (i2 <= sRange) {
              transY2 -= speed
              if (Math.abs(transY2) > totalHeight) {
                transY2 += totalHeight
                i2++
              }
            } else if (i2 > sRange && i2 < sRange + 2) {
              transY2 -= halfSpeed
              if (Math.abs(transY2) > totalHeight) {
                transY2 += totalHeight
                i2++
              }
            } else {
              if (transY2 == endDis2) return
              let dropSpeed = (endDis2 + transY2) / halfSpeed
              dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < 1 ? 1 : dropSpeed
              transY2 -= dropSpeed
              transY2 = Math.abs(transY2) > endDis2 ? transY2 = -endDis2 : transY2
            }
          }, 200)

          this.timer2 = setTimeout(() => {
            if (i3 <= sRange) {
              transY3 -= speed
              if (Math.abs(transY3) > totalHeight) {
                transY3 += totalHeight
                i3++
              }
            } else if (i3 > sRange && i3 < sRange + 2) {
              transY3 -= halfSpeed
              if (Math.abs(transY3) > totalHeight) {
                transY3 += totalHeight
                i3++
              }
            } else {
              if (transY3 == endDis3) return
              let dropSpeed = (endDis3 + transY3) / halfSpeed
              dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < 1 ? 1 : dropSpeed
              transY3 -= dropSpeed
              transY3 = Math.abs(transY3) > endDis3 ? transY3 = -endDis3 : transY3
            }
          }, 400)

          this.timer3 = setTimeout(() => {
            if (i4 <= sRange) {
              transY4 -= speed
              if (Math.abs(transY4) > totalHeight) {
                transY4 += totalHeight
                i4++
              }
            } else if (i4 > sRange && i4 < sRange + 2) {
              transY4 -= halfSpeed
              if (Math.abs(transY4) > totalHeight) {
                transY4 += totalHeight
                i4++
              }
            } else {
              let dropSpeed = (endDis4 + transY4) / halfSpeed
              if (num4 < 3) {
                dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < .1 ? .1 : dropSpeed
              } else if (num4 < 5 && num4 >= 3) {
                dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < .3 ? .3 : dropSpeed
              } else {
                dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < .3 ? .3 : dropSpeed
              }

              transY4 -= dropSpeed
              transY4 = Math.abs(transY4) > endDis4 ? transY4 = -endDis4 : transY4
              if (Math.abs(transY4) >= endDis4) {
                clearInterval(this.timer)
                clearTimeout(this.timer1)
                clearTimeout(this.timer2)
                clearTimeout(this.timer3)
                this.isStart = false
              }
            }
          }, 600)

            this.transY1=transY1
            this.transY2=transY2
            this.transY3=transY3
            this.transY4=transY4
        }, 1000 / 60)
        this.changeColor = 1
      },

      reset () {
        this.transY1 = 0
        this.transY2 = 0
        this.transY3 = 0
        this.transY4 = 0

      }
    }
  }
</script>

<style scoped>
.mp-slot{
  width: 65%;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  padding-top: 65px;
}
.back-slot{
  width: 100%;
  position: absolute;
}
.press{
  width: 100px;
  height: 80px;
  background-color:rgba(243,54,74,0.6);
  position:fixed;
  left:140px;
  top:215px;
  border-radius: 35px;
}
.press::after{
  border: none;
}
.mp-slot-box{
  width: 80px;
  height:95px;
  line-height: 95px;
  font-size: 36px;
  font-weight: bold;
  color: #f3364a;
  overflow: hidden;
  text-align: center;
}
</style>

参考：https://github.com/o2team/wxapp-market