以下为转盘抽奖组件的使用方法（微信小程序）

作者：Kevin.W

npm安装：npm i mk-wxcom-ttl

json引用

"usingComponents": {
  "turntable-lottery": "../../../components/turntable-lottery/turntable-lottery"
}

页面引用

<turntable-lottery id="turntableLottery" lotteryData="{{lotteryData}}" bind:initDone="onInitDone" bind:finsh="onFinsh"></turntable-lottery>
<button size="default" type="primary" onTap="do">开始抽奖</button>

js示例

data: {
    lotteryData: {
      turntable: {
        width: 517,
        height: 517,
        img: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01DMgqRe23c06TkBfxp_!!555657275.png"
      },
      pointer: {
        width: 58,
        height: 71,
        x: 228,
        y: 216,
        img: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01QnpPgP23c06Z0mG79_!!555657275.png"
      },
      config: {
        time: 8,
        animation: "ease-in-out",
        allPrize: 6,
        round: 12
      },
      // 奖品列表 可不传
      // prizeList: [
      //   { id: 0, img: "xxx.png", name: 'xxxxxxx' },
      //   { id: 1, img: "xxx.png", name: 'xxxxxxx' },
      //   { id: 2, img: "xxx.png", name: 'xxxxxxx' },
      //   { id: 3, img: "xxx.png", name: 'xxxxxxx' },
      //   { id: 4, img: "xxx.png", name: 'xxxxxxx' },
      //   { id: 5, img: "xxx.png", name: 'xxxxxxx' }
      // ]
    }
 },
 
 onInitDone(e) {
   // e.detail.success==true时为初始化完成
   console.log(e.detail)
 },
 do(){
  // 实例化组件
  let turntableLottery = this.selectComponent('#turntableLottery')
  // 开始抽奖 prize为结束时需要转到哪个奖品
 	turntableLottery.lotStart({ prize: 2 })
 },
 onFinsh(e) {
  // 结束抽奖 e.detail为返回的中奖数据
  console.log(e.detail)
  // e.detail.id为抽奖时传入的id
  // e.detail.prize为中奖数据（若lotteryData里未传prizeList则为空对象）
 },

属性说明

| 字段名 | 类型 | 必填 | 描述 | | --- | --- | --- | --- | | lotteryData | Object | 是 | 转盘抽奖所需资源 | | turntable | Object | 是 | 转盘背景所需资源 | | pointer | Object | 是 | 指针所需资源 | | config | Object | 是 | 旋转所需资源 | | prizeList | Array | 否 | 奖品列表 | | pointer.x | Number | 是 | 指针x轴坐标 | | pointer.y | Number | 是 | 指针x轴坐标 | | time | Number | 是 | 旋转时间（秒） | | animation | String | 是 | 旋转动画 | | allPrize | Number | 是 | 奖品总数 | | round | Number | 是 | 旋转几圈 | | onFinsh | Function | 是 | 抽奖结束回调 | | onInitDone | Function | 是 | 初始化 | | lotStart | Function | 是 | 开始抽奖方法---需传入一个对象 |

注意

• 开始抽奖时传入的prize不是下标，是奖品总数