支付宝小程序营销组件 砸金蛋·hit-eggs
红包在各个金蛋之间移动，用户需要快速反应，点击红包所在金蛋进行砸蛋抽奖。
更多详细信息请参见 代码市场。
扫码体验
示例代码
安装
npm i ant-mini-hit-eggs --save注册
//.json
{
"usingComponents": {
"hit-eggs": "ant-mini-hit-eggs/es/hit-eggs/index"
}
}调用
<!-- .axml -->
<view>
<hit-eggs
onStart="onStart"
onFinish="onFinish"
disabled="{{disabled}}"
/>
</view>undefined//.js
Page({
data: {
disabled: false,
times: 0
},
onStart () {
console.log('开始砸金蛋', index);
this.setData({
times: ++this.data.times,
})
},
onFinish () {
console.log('砸金蛋结束', index);
if (this.data.times >= 3) {
this.setData({
disabled: true,
});
}
}
});属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| eggsCount | 金蛋个数。 | Number | 9 |
| eggCol | 金蛋列数。 | Number | 3 |
| eggWidth | 金蛋大小，单位 rpx。 | Number | 200 |
| hammerWidth | 锤子大小， 单位 rpx。 | Number | 100 |
| eggMarginTop | 金蛋上边距。 | Number | 20 |
| hammerOriginX | 锤子原点距离组件右上顶点的偏移 X，左正右负，单位 rpx。 | Number | -20 |
| hammerOriginY | 锤子原点距离组件右上顶点的偏移 Y，下正上负，单位 rpx。 | Number | -20 |
| jumpingInterval | 金蛋跳动时间间隔，单位 ms。 | Number | 600 |
| smashingDuration | 砸金蛋持续时间，单位 ms。 | Number | 1500 |
| className | 自定义类名。 | String | '' |
| disabled | 是否进行游戏。 | Boolean | false |
| onStart | 砸金蛋开始的回调，参数：index 被砸金蛋的下标。 | Function | (index) => {} |
| onFinish | 砸金蛋结束的回调，参数：index 被砸金蛋的下标。 | Function | (index) => {} |
| hammerIcon | 锤子图标。 | String | src |
| eggIcon | 金蛋图标。 | String | src |
| jumpIcon | 金蛋跳动的图标。 | String | src |
| redBagIcon | 金蛋被砸的图标。 | String | src |
| smashedIcon | 金蛋砸碎的图标。 | String | src |