125 lines
2.9 KiB
Markdown
125 lines
2.9 KiB
Markdown
|
V3+ts专属版
|
||
|
|
|
||
|
|
非固定图片式转盘，可自定义传入奖项列表
|
||
|
|
|
||
|
|
## Attributes
|
||
|
|
|
||
|
|
| 属性 | 说明 | 类型 | 默认 |
|
||
|
|
| ------ | ----------- | ---------- | --- |
|
||
|
|
| list | 奖项列表 | listItem[] | [] |
|
||
|
|
| radius | 圆盘半径打，单位rpx | number | 300 |
|
||
|
|
| speed | 转速 | number | 20 |
|
||
|
|
|
||
|
|
### listItem
|
||
|
|
|
||
|
|
| 属性 | 说明 | 类型 |
|
||
|
|
| --------- | -------------- | ------ |
|
||
|
|
| title | 奖项标题 | string |
|
||
|
|
| color | 奖项标题颜色 | string |
|
||
|
|
| size | 奖项标题字号大小，单位rpx | string |
|
||
|
|
| bgColor | 奖项区背景色 | string |
|
||
|
|
| image | 奖项图片地址 | string |
|
||
|
|
| imageSize | 奖项图片尺寸，单位rpx | string |
|
||
|
|
|
||
|
|
## Events
|
||
|
|
|
||
|
|
| Events | 说明 |
|
||
|
|
| ------ | -------- |
|
||
|
|
| start | 点击中心按钮触发 |
|
||
|
|
| end | 结束滚动 |
|
||
|
|
|
||
|
|
## 方法
|
||
|
|
|
||
|
|
通过ref调用
|
||
|
|
|
||
|
|
| 方法名 | 说明 |
|
||
|
|
| ----- | -------------------- |
|
||
|
|
| begin | 开始转动 |
|
||
|
|
| stop | 准备停止转动，参数为中奖序号，从1开始算 |
|
||
|
|
|
||
|
|
## 示例
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '谢谢参与',
|
||
|
|
bgColor: '#eeeeee',
|
||
|
|
color: '#666666'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '二等奖',
|
||
|
|
bgColor: '#E6A23C',
|
||
|
|
color: '#ffffff',
|
||
|
|
image:
|
||
|
|
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '谢谢参与',
|
||
|
|
bgColor: '#eeeeee',
|
||
|
|
color: '#666666'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '',
|
||
|
|
bgColor: '#67C23A',
|
||
|
|
color: '#ffffff',
|
||
|
|
image:
|
||
|
|
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg',
|
||
|
|
imageSize: '120rpx'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '谢谢参与',
|
||
|
|
bgColor: '#eeeeee',
|
||
|
|
color: '#666666'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '安慰奖',
|
||
|
|
bgColor: '#409EFF',
|
||
|
|
color: '#ffffff',
|
||
|
|
image:
|
||
|
|
'https://bearfun-dev.oss-accelerate.aliyuncs.com/crp/3be7bcb2fcc640bb9a27b5c9a9ff7b19.jpg'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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>
|
||
|
|
```
|