支付宝小程序营销组件 水果机·wheel-draw
通过点击水果机（九宫格）中心按钮来进行抽奖，可以自定义转动抽奖的次数。
更多详细信息请参见 代码市场。
扫码体验
示例代码
安装
npm i ant-mini-fruit-slots --save注册
// .json
{
"usingComponents": {
"fruit-slots": "ant-mini-fruit-slots/es/fruit-slots/index"
}
}调用
<!-- .axml -->
<view class="container">
<fruit-slots
prizeList="{{prizeList}}"
prizeName="{{prizeName}}"
disabled="{{disabled}}"
currentIndex="{{currentIndex}}"
onStart="onStart"
onFinish="onFinish"
/>
<view class='tip-text'>{{tipText}}</view>
</view>undefined// .js
Page({
data: {
prizeList: [ // prizeList 长度必须为8，其中须包含奖项名字 name 和图标地址 icon
{
'name': '谢谢参与',
'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
},
{
'name': '666元红包',
'icon': 'https://zos.alipayobjects.com/rmsportal/nxpXbcNBOmbeIOVCUsuS.png'
},
{
'name': '1元红包',
'icon': 'https://zos.alipayobjects.com/rmsportal/RxQruKQwiQCeYXhvwCfP.png'
},
{
'name': '3元红包',
'icon': 'https://zos.alipayobjects.com/rmsportal/tyMAYvTdjRFOVxqWVhsj.png'
},
{
'name': '谢谢参与',
'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
},
{
'name': '1元红包',
'icon': 'https://zos.alipayobjects.com/rmsportal/RxQruKQwiQCeYXhvwCfP.png'
},
{
'name': '谢谢参与',
'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
},
{
'name': '5元红包',
'icon': 'https://zos.alipayobjects.com/rmsportal/qanDEFeGBoiPflYxkhJY.png'
}
],
prizeName: '5元红包',
disabled: false,
currentIndex: 4,
tipText: '',
},
onStart() {
this.setData({
tipText: '正在抽奖...'
});
},
onFinish(index, name) {
this.setData({
currentIndex: Math.floor(Math.random() * 8),
tipText: `抽奖结果：${name}`
});
}
});undefined属性
| 属性 | 描述 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| width | 组件宽度，单位 rpx。 | Number | 700 | 否 |
| margin | 格子间的边距，单位 rpx。 | Number | 20 | 否 |
| prizeList | 奖项列表，长度必须为8，须包含 name 和 icon字段。 | Array | [] | 是 |
| prizeName | 抽奖结果的奖品 name，其值必须位于 prizeList 中。 | String | '' | 是 |
| rollTimes | 转动圈数。 | Number | 3 | 否 |
| currentIndex | 转动开始的格子下标。 | Number | 0 | 否 |
| speed | 转动速度，单位 ms。 | Number | 100 | 否 |
| class | 自定义类名。 | String | '' | 否 |
| disabled | 抽奖按钮是否可点击。 | Boolean | false | 否 |
| onStart | 转动开始的回调。 | Function | () => {} | 否 |
| onFinish | 转动结束的回调, @params(index: 奖品所在格子下标，name: 奖品名称)。 | Function | (index, name) => {} | 否 |
说明：组件中格子自左上角顺时针开始标号，围绕中间按钮，下标从 0 开始递增到 7。当需要组件从左下角的格子为初始位置开始转动，只需要设置 currentIndex = 6 即可。
