微信小程序抽奖组件的使用步骤
这篇文章主要给大家介绍了关于微信小程序抽奖组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
采用微信组件的方式提供,因组件内部使用了async/await,所以请在微信开发者工具"详情=》本地设置 勾上 增强编译和使用npm",小程序npm使用方法请参考:微信小程序-npm支持
先看效果图:
使用步骤:
步骤一:
安装依赖或前往githua下载源码,拷贝dist目录下的lottery-turntable目录
1 | npm i lottery-turntable- for -wx-miniprogram |
步骤二:
页面JSON配置
1 2 3 4 5 | { "usingComponents" : { "lottery-turntable" : "lottery-turntable-for-wx-miniprogram/lottery_turntable/index" } } |
步骤三:
准备数据和增加事件处理(使用组件页面JS)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | const datas = [{ "id" : "792085712309854208" , "imgUrl" : "../../images/icon.png" , "title" : "迅雷白金会员月卡 - 1" }, { "id" : "766410261029724160" , "imgUrl" : "../../images/icon.png" , "title" : "迅雷白金会员月卡 - 2" }, { "id" : "770719340921364480" , "imgUrl" : "../../images/icon.png" , "title" : "迅雷白金会员月卡 - 3" }, { "id" : "770946438416048128" , "imgUrl" : "../../images/icon.png" , "title" : "迅雷白金会员月卡 - 4" }, { "id" : "781950121802735616" , "imgUrl" : "../../images/icon.png" , "title" : "迅雷白金会员月卡 - 5" }, { "id" : "766411654436233216" , "imgUrl" : "../../images/icon.png" , "title" : "迅雷白金会员月卡 - 6" }, { "id" : "770716883860332544" , "imgUrl" : "../../images/icon.png" , "title" : "迅雷白金会员月卡 - 7" }, { "id" : "796879308510732288" , "imgUrl" : "../../images/icon.png" , "title" : "迅雷白金会员月卡 - 8" }]; Page({ data: { datas: datas, // 数据 prizeId: '' , // 抽中结果id,通过属性方式传入组件 config: { // 转盘配置,通过属性方式传入组件 titleLength: 7 } }, /** * 次数不足回调 * @param e */ onNotEnoughHandle(e) { wx.showToast({ icon: 'none' , title: e.detail }) }, /** * 抽奖回调 */ onLuckDrawHandle() { this .setData({ prizeId: this .data.datas[Math.floor(Math.random() * 10 % this .data.datas.length)].id }); }, /** * 动画旋转完成回调 */ onLuckDrawFinishHandle() { const datas = this .data.datas; const data = datas.find((item) => { return item.id === this .data.prizeId; }); wx.showToast({ icon: 'none' , title: `恭喜你抽中 ${data.title}` }) this .setData({ prizeId: '' }); } }) |
步骤四:
页面使用
1 2 3 4 5 6 7 8 9 | <lottery-turntable data= "{{datas}}" prize-id= "{{prizeId}}" count= "{{5}}" config= "{{config}}" bindLuckDraw= "onLuckDrawHandle" bindNotEnough= "onNotEnoughHandle" bindLuckDrawFinish= "onLuckDrawFinishHandle" ></lottery-turntable> |
步骤五:
更改组件配置项(以下为默认配置),通过config属性传入一个js对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /** * ease: 取值如下 * 'linear' 动画从头到尾的速度是相同的 * 'ease' 动画以低速开始,然后加快,在结束前变慢 * 'ease-in' 动画以低速开始 * 'ease-in-out' 动画以低速开始和结束 * 'ease-out' 动画以低速结束 * 'step-start' 动画第一帧就跳至结束状态直到结束 * 'step-end' 动画一直保持开始状态,最后一帧跳到结束状态 */ // 以下为默认配置 let config = { size: { width: '572rpx' , height: '572rpx' }, // 转盘宽高 bgColors: [ '#FFC53F' , '#FFED97' ], // 转盘间隔背景色 支持多种颜色交替 fontSize: 10, // 文字大小 fontColor: '#C31A34' , // 文字颜色 titleMarginTop: 12, // 最外文字边距 titleLength: 6 // 最外文字个数 iconWidth: 29.5, // 图标宽度 iconHeight: 29.5, // 图标高度 iconAndTextPadding: 4, // 最内文字与图标的边距 duration: 8000, // 转盘转动动画时长 rate: 1.5, // 由时长s / 圈数得到 border: 'border: 10rpx solid #FEFAE4;' , // 转盘边框 ease: 'ease-out' // 转盘动画 }; |
总结
到此这篇关于微信小程序抽奖组件的文章就介绍到这了