项目地址
效果图
使用方式
引入组件 .json
{
"usingComponents": {
"turnplate-lottery": "/components/turnplate-lottery/index"
}
}
使用组件 .wxml
<turnplate-lottery id="turnplate" list="{{prizeList}}"></turnplate-lottery>
<button catchtap="onStartLottery">开始抽奖</button>
调用抽奖方法 .js
// 开始抽奖
onStartLottery(e) {
const winIdx = 3; // 中奖索引(由接口返回),从0开始算。3:表示会停留在第四个上
this.selectComponent('#turnplate').start(winIdx, (res) => {
console.log('转盘停止后的回调')
})
}
重置方法 .js
// 转盘角度会重置到0度
this.selectComponent('#turnplate').reset();
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
width | Number | 680 | 转盘宽度(直径),单位rpx |
list | Array | [] | 奖品数据列表 [{name: ‘奖品名’, desc: ‘描述’, img: ‘奖品图’}, …] |
fanColors | Array | [‘rgb(15, 95, 148)’] | 扇形颜色,会循环获取 |
fanImage | String | 无 | 扇形图片,如果有值,那么fanColors 就失效了 |
turns | Number | 5 | 转盘圈数,需要大于1 |
time | Number | 0 | 转盘总耗时,单位ms,默认会根据圈数计算,必须大于1000ms |
属性list
[
{name: '奖品名0', desc: '描述0', img: '奖品图链接'},
{name: '奖品名1', desc: '描述1', img: '奖品图链接'},
...
]
list
长度需要大于4,如果小于4会自动补全,但额外补全的扇形会没有数据。
方法
方法名 | 说明 |
---|---|
start | 开始抽奖 start(idx, callback) |
reset | 重置转盘的调度 reset() |
相关文章
图解转盘抽奖样式