支付宝9宫格抽奖,活动抽奖
查看GitHub仓库最新文档(源码)
https://github.com/flyingdwang/flyingd-fruit-slots.git
cnpm install flyingd-fruit-slots --save
// .json { "usingComponents": { "fl-fruit-slots": "flyingd-fruit-slots/fl-fruit-slots" } } 演示代码
<!-- .axml --> <fl-fruit-slots prizeList="{{prizeList}}" prizeActiveIndex="{{prizeActiveIndex}}" disabled="{{disabled}}" currentIndex="{{currentIndex}}" onStart="onStart" onFinish="onFinish" />
// .js
Page({
data:{
prizeList:[
{
'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'
},
],
prizeActiveIndex: null,
disabled: false,
currentIndex: 0,
tipText: '',
},
/** 开始抽奖 */
onStart(resolve) {
/** 有resolve 返回值 则抽奖 否则 不执行 */
/**
if(true){
resolve(index)
}else{
return
}
*/
/** 抽奖 */
this.requestFun().then(res=>{
console.log(res.index);
/** 成功回调 */
resolve(res.index);
this.setData({
prizeActiveIndex:res.index,
tipText: '正在抽奖...'
})
})
},
/** 抽奖结束回调 */
onFinish(index, prizeItem) {
this.setData({
tipText: `抽奖结果：${prizeItem.name}`
});
},
/** 模拟请求数据 */
requestFun(){
return new Promise((resolve, reject)=>{
let index = Math.floor(Math.random() * 8);
let { name } = this.data.prizeList[index];
resolve({name,index});
})
},
});
属性
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| width | 组件宽度，单位 rpx。 | Number | 700 | 否 |
| margin | 格子间的边距，单位 rpx。 | Number | 20 | 否 |
| prizeList | 奖项列表，长度必须为8，须包含 name 和 icon字段。 | Array | [] | 是 |
| prizeActiveIndex | 抽奖结果的奖品 索引(0-8)，其值必须位于 prizeList 中。 | Number | null | 是 |
| rollTimes | 转动圈数。 | Number | 3 | 否 |
| currentIndex | 转动开始的格子下标。 | Number | 0 | 否 |
| speed | 转动速度，单位 ms。 | Number | 100 | 否 |
| class | 自定义类名。 | String | - | 否 |
| disabled | 抽奖按钮是否可点击。 | Boolean | false | 否 |
| onStart | 抽奖转动方法; 需要有成功回调 resolve(); | Function | () => {} | 是 |
| onFinish | 转动结束的回调, @params(index: 奖品所在格子下标，prizeItem: 奖品详情参数)。 | Function | (index, prizeItem)=>{} | 否 |
说明： 组件中格子自左上角顺时针开始标号，围绕中间按钮，下标从 0 开始递增到 7。当需要组件从左下角的格子为初始位置开始转动，只需要设置 currentIndex = 6 即可。
查看格子顺序详情(图片)
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
