UNPKG

mk-mycom-ttl

Version:

a sequenceFrame component

100 lines (92 loc) 2.92 kB
<a name="xVsSI"></a> ### 以下为转盘抽奖组件的使用方法(淘宝小程序) > 作者:Kevin.W > npm安装:npm i mk-mycom-ttl --- <a name="A00UH"></a> #### json引用 ```javascript "usingComponents": { "turntable-lottery": "/pages/method/turntable-lottery/turntable-lottery" } ``` <a name="xpZj3"></a> #### 页面引用 ```javascript <turntable-lottery lotteryData="{{lotteryData}}" onRef="turntableLottery" onInitDone="onInitDone" onFinsh="onFinsh"></turntable-lottery> <button size="default" type="primary" onTap="do">开始抽奖</button> ``` <a name="Mmzql"></a> #### js示例 ```javascript 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' } // ] } }, turntableLottery(e) { this.turntableLottery = e }, onInitDone(e) { // e.success==true时为初始化完成 console.log(e) }, do(){ // 开始抽奖 prize为结束时需要转到哪个奖品 this.turntableLottery.lotStart({ prize: 2 }) }, onFinsh(e) { // 结束抽奖 e为返回的中奖数据 console.log(e) // e.id为抽奖时传入的id // e.prize为中奖数据(若lotteryData里未传prizeList则为空对象) }, ``` <a name="TmcMW"></a> #### 属性说明 | 字段名 | 类型 | 必填 | 描述 | | --- | --- | --- | --- | | 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 | 是 | 旋转几圈 | | onRef | Function | 是 | 实例化组件 | | onFinsh | Function | 是 | 抽奖结束回调 | | onInitDone | Function | 是 | 初始化 | | lotStart | Function | 是 | 开始抽奖方法---需传入一个对象 | <a name="jTDNS"></a> #### 注意 - 开始抽奖时传入的prize不是下标,是奖品总数