支付寶小程序營銷組件 水果機·wheel-draw

通過點擊水果機（九宮格）中心按鈕來進行抽獎，可以自定義轉(zhuǎn)動抽獎的次數(shù)。

更多詳細信息請參見 代碼市場。

掃碼體驗

示例代碼

安裝

npm i ant-mini-fruit-slots --save

注冊

// .json
{
  "usingComponents": {
    "fruit-slots": "ant-mini-fruit-slots/es/fruit-slots/index"
  }
}

調(diào)用

<!-- .axml -->
<view class="container">
  <fruit-slots
    prizeList="{{prizeList}}"
    prizeName="{{prizeName}}"
    disabled="{{disabled}}"
    currentIndex="{{currentIndex}}"
    onStart="onStart"
    onFinish="onFinish"
  />
  <view class='tip-text'>{{tipText}}</view>
</view>undefined

// .js
Page({
  data: {
    prizeList: [ // prizeList 長度必須為8，其中須包含獎項名字 name 和圖標地址 icon
      {
        'name': '謝謝參與',
        'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
      },
      {
        'name': '666元紅包',
        'icon': 'https://zos.alipayobjects.com/rmsportal/nxpXbcNBOmbeIOVCUsuS.png'
      },
      {
      'name': '1元紅包',
      'icon': 'https://zos.alipayobjects.com/rmsportal/RxQruKQwiQCeYXhvwCfP.png'
      },
      {
        'name': '3元紅包',
        'icon': 'https://zos.alipayobjects.com/rmsportal/tyMAYvTdjRFOVxqWVhsj.png'
      },
      {
        'name': '謝謝參與',
        'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
      },
      {
        'name': '1元紅包',
        'icon': 'https://zos.alipayobjects.com/rmsportal/RxQruKQwiQCeYXhvwCfP.png'
      },
      {
        'name': '謝謝參與',
        'icon': 'https://zos.alipayobjects.com/rmsportal/dexmbhnbsLRGIZGBqTcA.png'
      },
      {
        'name': '5元紅包',
        'icon': 'https://zos.alipayobjects.com/rmsportal/qanDEFeGBoiPflYxkhJY.png'
      }
    ],
    prizeName: '5元紅包',
    disabled: false,
    currentIndex: 4,
    tipText: '',
  },
  onStart() {
    this.setData({
      tipText: '正在抽獎...'
    });
  },
  onFinish(index, name) {
    this.setData({
      currentIndex: Math.floor(Math.random() * 8),
      tipText: `抽獎結(jié)果：${name}`
    });
  }
});undefined

屬性

說明：組件中格子自左上角順時針開始標號，圍繞中間按鈕，下標從 0 開始遞增到 7。當需要組件從左下角的格子為初始位置開始轉(zhuǎn)動，只需要設(shè)置 currentIndex = 6 即可。