Ant-mini-hit-eggs NPM

ant-mini-hit-eggs

砸金蛋支付宝小程序组件

Installation

ayarn add ant-mini-hit-eggs

Usage

json

{
  "usingComponents": {
    "hit-geggs": "ant-mini-hit-eggs/es/hit-geggs/index"
  }
}

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).

支付宝小程序砸金蛋打地鼠抽奖 mini-program

@infinitebrahmanuniverse/nolb-ant-@everything-registry/sub-chunk-1143

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago