在上一篇中《小程序canvas开发水果老虎机》我们做了一个水果机的抽奖组件，为水果抽奖机新增一种新的抽奖模式，复用水果机抽奖组件，实现上基本没什么难度，跳开水果机算法就基本实现了，效果如下

• 支持有序抽奖
• 支持无序抽奖
• 支持自定义每个奖品
• 支持自定义奖品个数(>=2)
• 支持中奖后的回调方法

安装方法

GITHUB上有详细说明。

配置

wxml

<view wx:if="{{fruitConfig}}" class="fruit-container {{fruitConfig.containerClass||''}}" style="{{fruitConfig.containerStyle||''}}">
  <ui-list list="{{fruitConfig}}" />
  <canvas type='2d' disable-scroll="true" id="fruit-canvas" class='fruit-canvas'></canvas>
</view>

js

const Pager = require('../../components/aotoo/core/index')
const mkFruits = require('../../components/modules/fruit')
Pager({
  data: {
    fruitConfig: mkFruits({
      id: 'fruitTable',
      ...
      ...
    },
    
    // callback，动画结束后响应
    function (param) {
      console.log(param); // 中奖数据
      console.log(param.value); // 中奖值
    })
  }
})

id
配置实例的Id

containerClass
容器样式

containerStyle
容器内联样式

max
设置max值后，根据平方算法，自动计算果盘数量，max定义一行几个水果，默认九宫格，max为3

count
与max的区别在于果盘数量由用户指定，且果盘不再为老虎机的游戏模式，max数量仍为定义一行几个水果

设置count为有效数据后，将以常规抽奖盘代替老虎机抽奖盘

confuse
使果盘数据无序化，只有当count为有效数据时，confuse才能生效

fruitsData
Object，指定对应位置的格子内容，支持文字/图片

回调方法
mkFruits(config, callback)水果盘动画结束后响应方法

如何设置

设置宝箱抽奖盘
常规抽奖盘不再以水果老虎机的游戏形式展现

mkFruits({
  id: 'fruit',
  count: 3, // count默认为0，当count设定>0时，组件不再输出水果盘
  max: 3,  // count>0时，max表示每行显示个数
  fruitsData: {
    1: {title: '石头', value: '001'},  // value默认为下标叙述，也可以手动指定
    2: {title: '剪刀', value: '002'}, 
    3: {title: '布', value: '003'}
  },
})

设置果盘内容(图片)
通过fruitsData设置指定位置显示内容，支持文本/图片

mkFruits({
  id: 'fruit',
  max: 4,
  fruitsData: {
    1: {title: '一等奖', value: '001'}, 
    5: {img: {src: '/images/xxx.jpg'}, value: '003'}, 
  },
})

如何获取水果盘的实例
运行水果盘需要调用实例方法，首先需要通过getElementsById获取水果盘实例

const Pager = require('../../components/aotoo/core/index')
const mkFruits = require('../../components/modules/fruit')
Pager({
  data: {
    fruitConfig: mkNavball({
      id: 'fruit'
    }),
  },

  onReady(){
    // 获取水果盘实例
    const instance = this.fruit
    // 或者 
    // const instance = this.getElementsById('fruit')  
  }
})

run
运行水果盘

onReady() {
  // 获取水果盘实例
  const instance = this.getElementsById('fruit')
  instance.run()
}

源码戳这里

下列小程序DEMO包含多形态日历，下拉菜单、筛选列表、索引列表、markdown(包含表格)、评分组件、水果老虎机、折叠面板、双栏分类导航(左右)、刮刮卡、日历等组件