支付宝小程序营销组件 砸金蛋·hit-eggs
2020-09-18 11:26 更新
红包在各个金蛋之间移动,用户需要快速反应,点击红包所在金蛋进行砸蛋抽奖。
更多详细信息请参见 代码市场。
扫码体验
示例代码
安装
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 |
以上内容是否对您有帮助:
更多建议: