ant-mini-hit-eggs

支付宝小程序砸金蛋组件

Usage no npm install needed!

<script type="module">
  import antMiniHitEggs from 'https://cdn.skypack.dev/ant-mini-hit-eggs';
</script>

README

ant-mini-hit-eggs

砸金蛋支付宝小程序组件

Installation

ayarn add ant-mini-hit-eggs

Usage

  • json
{
  "usingComponents": {
    "hit-geggs": "ant-mini-hit-eggs/es/hit-geggs/index"
  }
}
  • js
Page({
  data: {
    disabled: false,
    times: 0
  },
  onStart(index) {
    console.log('开始砸金蛋', index);
    this.setData({
      times: ++this.data.times,
    })
  },
  onFinish(index) {
    console.log('砸金蛋结束', index);
    if (this.data.times >= 3) {
      this.setData({
        disabled: true,
      });
    }
  }
});
  • xaml
<view>
  <hit-geggs
    onStart="onStart"
    onFinish="onFinish"
    disabled="{{disabled}}"
  />
</view>

Config Options

属性 类型 默认值 含义
eggsCount Number 9 金蛋个数
eggCol Number 3 金蛋列数
eggWidth Number 200 金蛋大小，单位 rpx
hammerWidth Number 100 锤子大小， 单位 rpx
eggMarginTop Number 20 金蛋上边距
hammerOriginX Number -20 锤子原点距离组件右上顶点的偏移 X，左正右负，单位 rpx
hammerOriginY Number -20 锤子原点距离组件右上顶点的偏移 Y，下正上负，单位 rpx
jumpingInterval Number 600 金蛋跳动时间间隔，单位 ms
smashingDuration Number 1500 砸金蛋持续时间，单位 ms
className String '' 自定义类名
disabled Boolean false 是否进行游戏
onStart Function (index) => {} 砸金蛋开始的回调，参数：index 被砸金蛋的下标
onFinish Function (index) => {} 砸金蛋结束的回调，参数：index 被砸金蛋的下标
hammerIcon String src 锤子图标
eggIcon String src 金蛋图标
jumpIcon String src 金蛋跳动的图标
redBagIcon String src 金蛋被砸的图标
smashedIcon String src 金蛋砸碎的图标

API

  • 开始游戏 disabled=true
  • 暂停游戏 disabled=false
  • 开始砸金蛋 onStart
  • 结束砸金蛋 onFinish

Preview

License

The MIT License (MIT).