1.0.2 • Published 5 years ago
ant-mini-flip-draw v1.0.2
翻牌抽奖小程序模块
API
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| prizeList | Array | [] | 奖项列表【必填】，须包含 name 和 icon 字段 |
| prizeName | String | '' | 抽奖结果的奖品 name【必填】，其值必须位于 prizeList 中 |
| cardNum | Number | 9 | 展示多少张卡片，推荐3/6/9 |
| cardHeight | Number | 210 | 宽度固定210，高度需要等比换算设置 |
| cardBgImg | String | - | 卡背图片 |
| unawardImg | String | - | 未中奖展示图片 |
| isDrawing | Boolean | - | 是否正在抽奖，用于限制点击 |
| flipAllCards | String | - | 是否翻转剩余卡片 |
| onFlipStart | Function | () => {} | 转动开始的回调【选填】 |
示例
视图：
<view>
<flipdraw
prizeList="{{prizeList}}"
prizeName="{{prizeName}}"
isDrawing="{{isDrawing}}"
flipAllCards="{{flipAllCards}}"
onFlipStart="onFlipStart"
/>
</view>逻辑：
Page({
data: {
prizeList: [{
'name': '谢谢参与1',
'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
}, ... ],
prizeName: '',
flipAllCards: false,
isDrawing: false,
},
onFlipStart() {
console.log('开始了，这个时候最好页面控制下 loading 状态，组件内不做控制');
this.setData({
isDrawing: true, // 修改抽奖状态，防止重复点击多次请求
});
// 开始抽奖
drawRequest().then(res => {
console.log('拿到结果，设置奖品信息');
if (res.success) {
this.setData({
prizeName: '666元红包',
isDrawing: false,
});
} else {
this.setData({
isDrawing: false, // 抽奖结束一定要还原 isDrawing 状态
});
}
this.showResultDialog()
});
},
showResultDialog() {
// do something
this.setData({
flipAllCards: true, // 将剩下未翻过的牌自动翻，展示奖品结果。
})
}
});注意
- 请求前一定要设置 isDrawing = true，请求结束后一定要设置 isDrawing = false。
- cardHeight 卡片高度是相对750视觉稿设置的，宽高默认210x210rpx。宽度固定，高度可变。比如210x300的图片，cardHeight就设置为300；如果是200x250的图片需要等比转换一下，cardHeight = 210 * (250/200)