支付宝小程序营销组件 砸金蛋·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
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号