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


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实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 Javascript
JavaScript函数柯里化
Nov 07 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程序
2006/10/09 PHP
php error_log 函数的使用
2009/04/13 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
JS实现多功能计算器
2020/10/28 Javascript
tensorflow 中对数组元素的操作方法
2018/07/27 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
品酒会策划方案
2014/05/26 职场文书
骨干教师事迹材料
2014/12/17 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
党员承诺书范文2015
2015/04/27 职场文书