支付宝小程序营销组件 翻牌抽奖·flip-draw
页面上有 N 张卡牌，每张卡牌对应不同奖品，用户点击卡牌进行翻牌抽奖。开发者可自定义卡牌数量和翻牌的次数。
更多详细信息请参见 代码市场。
扫码体验
示例代码
安装
npm i ant-mini-flip-draw --save注册
//.json
{
"usingComponents": {
"flipdraw": "ant-mini-flip-draw/component/index"
}
}调用
<!-- .axml -->
<view>
<flipdraw
prizeList="{{prizeList}}"
prizeName="{{prizeName}}"
isDrawing="{{isDrawing}}"
flipAllCards="{{flipAllCards}}"
onFlipStart="onFlipStart"
/>
</view>//.js
Page({
data: {
docParamsImg: "https://img.alicdn.com/tfs/TB1sfaaJSzqK1RjSZFHXXb3CpXa-1326-846.png",
prizeList: [
{
'name': '谢谢参与1',
'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': '谢谢参与2',
'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
},
{
'name': '1元红包',
'icon': 'https://zos.alipayobjects.com/rmsportal/RxQruKQwiQCeYXhvwCfP.png'
},
{
'name': '谢谢参与3',
'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
},
{
'name': '5元红包',
'icon': 'https://zos.alipayobjects.com/rmsportal/qanDEFeGBoiPflYxkhJY.png'
}
],
cardBgImg: 'https://gw.alicdn.com/tfs/TB1P.AMXMHqK1RjSZJnXXbNLpXa-610-600.png',
prizeName: '',
flipAllCards: false,
isDrawing: false,
},
onFlipStart() {
console.log('开始了，这个时候最好页面控制下 loading 状态，组件内不做控制');
this.setData({
isDrawing: true, // 修改抽奖状态，防止重复点击多次请求
});
// 开始抽奖
setTimeout(() => {
console.log('拿到结果，设置奖品信息');
if (Math.random() > 0.3) {
this.setData({
prizeName: '666元红包',
isDrawing: false,
});
} else {
this.setData({
isDrawing: false, // 抽奖结束一定要还原 isDrawing 状态
});
}
this.showResultDialog()
}, 1000);
},
showResultDialog() {
// do something
this.setData({
flipAllCards: true, // 将剩下未翻过的牌自动翻，展示奖品结果。
})
}
});undefined属性
| 属性 | 描述 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| prizeList | 奖项列表，须包含 name 和 icon 字段。 | Array | [] | 是 |
| prizeName | 抽奖结果的奖品 name，其值必须位于 prizeList 中。 | String | '' | 是 |
| cardNum | 展示多少张卡片，推荐 3/6/9。 | Number | 9 | 是 |
| cardHeight | 宽度固定 210，高度需要等比换算设置。 | Number | 210 | 是 |
| cardBgImg | 卡背图片。 | String | - | 是 |
| unawardImg | 未中奖展示图片。 | String | - | 是 |
| isDrawing | 是否正在抽奖，用于限制点击。 | Boolean | - | 是 |
| flipAllCards | 是否翻转剩余卡片。 | String | - | 否 |
| onFlipStart | 转动开始的回调。 | Function | () => {} | 否 |
注意
- 请求前一定要设置
isDrawing = true，请求结束后一定要设置 isDrawing = false； - cardHeight 卡片高度是相对 750 视觉稿设置的，宽高默认 210x210rpx。宽度固定，高度可变。比如 210x300 的图片，cardHeight 就设置为 300；如果是 200x250 的图片需要等比转换一下，cardHeight = 210 * (250/200)。