小程序转盘抽奖组件

项目地址

码云
github

效果图

使用方式

引入组件 .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()

---

相关文章 图解转盘抽奖样式