mk-wxcom-ttl

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

作者：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不是下标，是奖品总数