更新记录

1.0.0（2023-08-15） 下载此版本

上传

平台兼容性

uni-app

其他

V3+ts专属版

非固定图片式转盘，可自定义传入奖项列表

Attributes

listItem

Events

方法

通过ref调用

示例

<template>
  <view class="rotary-table">
    <mosowe-rotary-table
      ref="rotaryTableRef"
      :list="list"
      :radius="300"
      @start="start"
      @end="end"></mosowe-rotary-table>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const list = [
  {
    title: '一等奖',
    bgColor: '#ff0000',
    color: '#ffffff',
    image:
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
  },
  {
    title: '谢谢参与',
    bgColor: '#eeeeee',
    color: '#666666'
  },
  {
    title: '二等奖',
    bgColor: '#E6A23C',
    color: '#ffffff',
    image:
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
  },
  {
    title: '谢谢参与',
    bgColor: '#eeeeee',
    color: '#666666'
  },
  {
    title: '',
    bgColor: '#67C23A',
    color: '#ffffff',
    image:
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    imageSize: '120rpx'
  },
  {
    title: '谢谢参与',
    bgColor: '#eeeeee',
    color: '#666666'
  },
  {
    title: '安慰奖',
    bgColor: '#409EFF',
    color: '#ffffff',
    image:
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
  },
  {
    title: '谢谢参与',
    bgColor: '#eeeeee',
    color: '#666666'
  }
];
const rotaryTableRef = ref<any>(null);
// 点击中心抽奖按钮
const start = () => {
  rotaryTableRef.value?.begin(); // 开始转
  // ...中间请求下接口，查询中奖序号
  setTimeout(() => {
    // 准备结束转动，参数数字代表中奖项，即list列表的第几个，从1开始算
    rotaryTableRef.value?.stop(3);
  }, 1000);
};
// 转盘停止转动
const end = () => {
  uni.showToast({
    title: '66666666'
  });
};
</script>