uni-app 实现横向或竖向滚动的抽奖方式 就像老虎机那样

在 uni-app 中实现类似老虎机的横向或竖向滚动抽奖效果，可以通过使用 swiper 组件和一些动画控制来实现。以下是一个简单的示例代码，展示了如何实现这种效果。

1. 横向滚动示例

页面模板（pages/index/index.vue）：

<template>
  <view class="container">
    <swiper
      class="swiper"
      :autoplay="false"
      :interval="0"
      :duration="500"
      circular
      @change="onSwiperChange"
      ref="swiper"
    >
      <swiper-item v-for="(item, index) in items" :key="index">
        <view class="item">{{ item }}</view>
      </swiper-item>
    </swiper>
    <button @click="startRolling">Start Rolling</button>
  </view>
</template>

页面脚本（pages/index/index.js）：

export default {
  data() {
    return {
      items: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
      currentIndex: 0,
      rolling: false,
      rollingTime: 3000, // Rolling duration in milliseconds
      rollingInterval: null,
    };
  },
  methods: {
    startRolling() {
      if (this.rolling) return;
      this.rolling = true;
      let swiper = this.$refs.swiper;
      this.rollingInterval = setInterval(() => {
        let nextIndex = (this.currentIndex + 1) % this.items.length;
        swiper.swiperTo(nextIndex, 500, false); // Swipe to next item with animation
        this.currentIndex = nextIndex;
      }, 100); // Change item every 100ms

      setTimeout(() => {
        clearInterval(this.rollingInterval);
        this.rolling = false;
        // Select a random prize (for demonstration purposes, we select the last item)
        let prizeIndex = Math.floor(Math.random() * this.items.length);
        swiper.swiperTo(prizeIndex, 500, true); // Final swipe with animation
      }, this.rollingTime);
    },
    onSwiperChange(event) {
      this.currentIndex = event.detail.current;
    },
  },
};

2. 样式（pages/index/index.scss）**

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.swiper {
  width: 80%;
  height: 200px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  height: 100%;
}

这个示例通过 swiper 组件的 swiperTo 方法实现了自动滚动效果，并通过一个定时器来控制滚动的速度。当用户点击“Start Rolling”按钮时，会触发滚动动画，并在一定时间后停止在随机选择的奖品上。你可以根据需要调整滚动时间、间隔和动画持续时间等参数。