支付宝小程序抽奖

文档https://www.npmjs.com/package/ant-mini-wheel-draw一. 安装依赖npm i ant-mini-wheel-draw安装完之后依赖当中会出现这个二. 引入依赖在要用到的页面引入路径看一下一定要一样否则会报错usingComponents: { wheel: ant-mini-wheel-draw/es/wheel/index },三.使用方式axmlview classcontainer wheel prizeList{{prizeList}} prizeName{{winPrizeName}} rotating{{isSpinning}} rotatingTime7500 rotTimes{{totalTimes}} turns7 onStarthandleStart onFinishhandleLotteryEnd / view classtip剩余抽奖次数{{totalTimes - usedTimes}}/view /viewjsPage({ data: { prizeList: [{ img: /images/redPacket.png, name: 10元无门槛券 }, { img: /images/thanks.png, name: 谢谢参与 }, { img: /images/redPacket.png, name: 2元话费红包 }, { img: /images/redPacket.png, name: 5元现金红包 }, { img: /images/gift.png, name: 定制小礼品 }, { img: /images/voucher.png, name: 满50减10券 } ], winPrizeName: , totalTimes: 5, usedTimes: 0, isSpinning: false // 控制转盘旋转开关 }, onLoad() { // 进页面先获取抽到的奖品名称 才能抽奖 this.getPrize(); }, getPrize() { const prizeArr this.data.prizeList; // 1. 先算出中奖奖品并赋值同步完成视图立刻更新 const randomIndex Math.floor(Math.random() * prizeArr.length); const targetPrize prizeArr[randomIndex].name; this.setData({ winPrizeName: targetPrize, }) }, handleStart(name, times){ console.log(name, times); // 抽奖开始 获取下一次抽到的物品 setTimeout(() { this.getPrize(); }, 7500) }, // 旋转结束回调 handleLotteryEnd(prizeName, useCount) { this.setData({ isSpinning: false, usedTimes: useCount }); my.alert({ title: 恭喜中奖, content: 您抽到${prizeName} }); } });