支付宝小程序营销组件 水果机·wheel-draw

通过点击水果机（九宫格）中心按钮来进行抽奖，可以自定义转动抽奖的次数。

更多详细信息请参见 代码市场。

扫码体验

示例代码

安装

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

注册

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

调用

<!-- .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: `抽奖结果：${name}`
    });
  }
});undefined

属性

属性	描述	类型	默认值	必填
width	组件宽度，单位 rpx。	Number	700	否
margin	格子间的边距，单位 rpx。	Number	20	否
prizeList	奖项列表，长度必须为8，须包含 name 和 icon字段。	Array	[]	是
prizeName	抽奖结果的奖品 name，其值必须位于 prizeList 中。	String	''	是
rollTimes	转动圈数。	Number	3	否
currentIndex	转动开始的格子下标。	Number	0	否
speed	转动速度，单位 ms。	Number	100	否
class	自定义类名。	String	''	否
disabled	抽奖按钮是否可点击。	Boolean	false	否
onStart	转动开始的回调。	Function	() => {}	否
onFinish	转动结束的回调, @params(index: 奖品所在格子下标，name: 奖品名称)。	Function	(index, name) => {}	否

说明：组件中格子自左上角顺时针开始标号，围绕中间按钮，下标从 0 开始递增到 7。当需要组件从左下角的格子为初始位置开始转动，只需要设置 currentIndex = 6 即可。