服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 微信小程序抽奖组件的使用步骤

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

2021-12-29 16:22い 狂奔的蜗牛 js教程

这篇文章主要给大家介绍了关于微信小程序抽奖组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

采用微信组件的方式提供,因组件内部使用了async/await,所以请在微信开发者工具"详情=》本地设置 勾上 增强编译和使用npm",小程序npm使用方法请参考:微信小程序-npm支持

先看效果图:

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

使用步骤:

步骤一:

安装依赖或前往githua下载源码,拷贝dist目录下的lottery-turntable目录

?
1
npm i lottery-turntable-for-wx-miniprogram

步骤二:

页面JSON配置

?
1
2
3
4
5
{
 "usingComponents": {
  "lottery-turntable":"lottery-turntable-for-wx-miniprogram/lottery_turntable/index"
 }
}

步骤三:

准备数据和增加事件处理(使用组件页面JS)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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: ''
  });
 }
})

步骤四:

页面使用

?
1
2
3
4
5
6
7
8
9
<lottery-turntable
   data="{{datas}}"
   prize-id="{{prizeId}}"
   count="{{5}}"
   config="{{config}}"
   bindLuckDraw="onLuckDrawHandle"
   bindNotEnough="onNotEnoughHandle"
   bindLuckDrawFinish="onLuckDrawFinishHandle"
  ></lottery-turntable>

步骤五:

更改组件配置项(以下为默认配置),通过config属性传入一个js对象

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 * 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'            // 转盘动画
};

总结

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

原文链接:https://blog.csdn.net/llf1991/article/details/112364439

延伸 · 阅读

精彩推荐
  • js教程JavaScript实现滚动加载更多

    JavaScript实现滚动加载更多

    这篇文章主要为大家详细介绍了JavaScript实现滚动加载更多,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    予倾9872021-12-20
  • js教程js事件模型与自定义事件实例解析

    js事件模型与自定义事件实例解析

    JavaScript一个最简单的事件模型,需要有事件绑定与触发,还有事件删除。本文将对其具体实现代码进行解析,需要的朋友一起来看下吧...

    caihg5612021-12-15
  • js教程JavaScript实现原型封装轮播图

    JavaScript实现原型封装轮播图

    这篇文章主要为大家详细介绍了JavaScript原型封装轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    zyhyoustrive12062021-12-21
  • js教程原生JavaScript实现轮播图

    原生JavaScript实现轮播图

    这篇文章主要为大家详细介绍了原生JavaScript实现轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    栋栋很优秀啊6862021-12-29
  • js教程JS+JQuery实现无缝连接轮播图

    JS+JQuery实现无缝连接轮播图

    这篇文章主要介绍了JS+JQuery实现无缝连接轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    南柯Seven7592021-12-23
  • js教程js+html+css实现手动轮播和自动轮播

    js+html+css实现手动轮播和自动轮播

    这篇文章主要为大家详细介绍了js+html+css实现手动轮播和自动轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考...

    南柯Seven9252021-12-22
  • js教程微信小程序视频弹幕发送功能的实现

    微信小程序视频弹幕发送功能的实现

    这篇文章主要介绍了微信小程序视频弹幕发送功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的...

    保护我方豆豆4822021-12-21
  • js教程一篇文章看懂JavaScript中的回调

    一篇文章看懂JavaScript中的回调

    这篇文章主要给大家介绍了如何通过一篇文章看懂JavaScript中的回调,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    疯狂的技术宅4732021-12-27