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


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 EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP学习之PHP表达式
2006/10/09 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
node+express制作爬虫教程
2016/11/11 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python中文编码知识点
2019/02/18 Python
python开头的coding设置方法
2019/08/08 Python
Django发送邮件功能实例详解
2019/09/02 Python
python是怎么被发明的
2020/06/15 Python
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
教师政风行风评议心得体会
2014/10/21 职场文书
投标邀请书范本
2015/02/02 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
用Python实现屏幕截图详解
2022/01/22 Python