微信小程序抽奖组件的使用步骤


Posted in Javascript onJanuary 11, 2021

采用微信组件的方式提供,因组件内部使用了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'            // 转盘动画
};

总结

到此这篇关于微信小程序抽奖组件的文章就介绍到这了,更多相关微信小程序抽奖组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JavaScript实现美化滑块效果
May 17 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 #Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 #Javascript
js删除对象中的某一个字段的方法实现
Jan 11 #Javascript
jQuery实现购物车全功能
Jan 11 #jQuery
jQuery实现手风琴特效
Jan 11 #jQuery
iview实现动态表单和自定义验证时间段重叠
Jan 10 #Javascript
JavaScript canvas实现文字时钟
Jan 10 #Javascript
You might like
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php中strtotime函数性能分析
2016/11/20 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python中的choice()方法使用详解
2015/05/15 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
励志演讲稿200字
2014/08/21 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
接待员岗位职责范本
2015/04/15 职场文书
入党介绍人意见2015
2015/06/01 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
Golang数据类型和相互转换
2022/04/12 Golang