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


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 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
详解JS函数stack size计算方法
Jun 18 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
vue 自定义的组件绑定点击事件
Apr 21 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
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
存储过程和函数的区别
2013/05/28 面试题
秘书岗位职责
2013/11/18 职场文书
银行出纳岗位职责
2013/11/25 职场文书
中国梦的演讲稿
2014/01/08 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
洗车工岗位职责
2014/03/15 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android