ant-mini-fruit-slots

1.0.6 • Public • Published

ant-mini-fruit-slots

支付宝小程序:九宫格转盘抽奖组件

Install

tnpm

yarn add ant-mini-fruit-slots

Usage

json

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

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}`
    });
  }
});

xaml

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

API

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

关于抽奖模式 mode 说明

默认情况下 mode = 'pre',即向服务端请求拿到抽奖结果后,将 prizeName 传给组件,然后组件开始执行动画抽奖效果。

但是如果抽奖请求时间较长的情况下,用户就可能点击抽奖后要等待一段时间才能看到抽奖动画,体验不太好,因此新增了 realtime 实时模式。 示例代码:

xaml

<fruit-slots
  mode="realtime"
  prizeList="{{prizeList}}"
  prizeName="{{prizeName}}"
  onStart="onStart"
  onFinish="onFinish"
/>
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: '',
  },
  onStart() {
    // 注意,点击开始抽奖时需要将 prizeName 置为空,等待请求拿到结果之后再重新赋值,否则多次抽奖会存在问题
    this.setData({
      prizeName: '',
    });
    // 模拟请求,延迟中奖
    setTimeout(() => {
      this.setData({
        prizeName: Math.random() > 0.4 ? '3元红包' : '谢谢参与',
      });
    }, 3000);
  },
  onFinish(index, name) {
    console.log('抽奖结果:', index, name);
  }
});

实际开发中推荐使用 realtime 模式。

关于格子下标说明

组件中格子自左上角顺时针开始,围绕中间按钮,下标从0开始递增到7

当需要组件从左下角的格子为初始位置开始转动,只需要设置 currentIndex = 6即可

组件效果

Package Sidebar

Install

npm i ant-mini-fruit-slots

Weekly Downloads

9

Version

1.0.6

License

ISC

Unpacked Size

13.6 kB

Total Files

6

Last publish

Collaborators

  • misaka
  • 0326
  • crazymousethief