微信小程序抽奖组件的使用步骤
(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )
采用微信组件的方式提供,因组件内部使用了async/await,所以请在微信开发者工具"详情=》本地设置 勾上 增强编译和使用npm",小程序npm使用方法请参考:微信小程序-npm支持
先看效果图:
使用步骤:
步骤一:
安装依赖或前往githua下载源码,拷贝dist目录下的lottery-turntable目录
npm i lottery-turntable-for-wx-miniprogram
步骤二:
页面JSON配置
{ "usingComponents": { "lottery-turntable":"lottery-turntable-for-wx-miniprogram/lottery_turntable/index" } }
步骤三:
准备数据和增加事件处理(使用组件页面JS)
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: '' }); } })
步骤四:
页面使用
<lottery-turntable data="{{datas}}" prize-id="{{prizeId}}" count="{{5}}" config="{{config}}" bindLuckDraw="onLuckDrawHandle" bindNotEnough="onNotEnoughHandle" bindLuckDrawFinish="onLuckDrawFinishHandle" ></lottery-turntable>
步骤五:
更改组件配置项(以下为默认配置),通过config属性传入一个js对象
/** * 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' // 转盘动画 };
总结
下一篇:JS数组索引检测中的数据类型问题详解