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


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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
JS求平均值的小例子
Nov 29 Javascript
js本地图片预览实现代码
Oct 09 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
详解django中使用定时任务的方法
2018/09/27 Python
Django中create和save方法的不同
2019/08/13 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
python中怎么表示空值
2020/06/19 Python
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
化工工艺专业求职信
2013/09/22 职场文书
物流专员岗位职责
2014/02/17 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
就业协议书范本
2014/04/11 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
护理见习报告范文
2014/11/03 职场文书
个人典型事迹材料
2014/12/30 职场文书
汉字听写大会观后感
2015/06/12 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
python中如何对多变量连续赋值
2021/06/03 Python