笔者在之前写了一篇关于小程序抽奖游戏组件的文章,当时的设计比较粗糙,组件的可复用性也不是很好,这里笔者新开发了一个抽奖小游戏组件,表现形式上和可复用性上都相对之前有了不小的提升。
读者朋友可以先看一下实际的表现形式:

小程序提供的动画实在是太难用,为了保证抽奖动画的连贯性,每一列实际上放了至少三个连在一起的图片,按照abc,bca,cab的顺序依次排放,每列放置两张,当一张图片移动完毕后,回到另外那张图身后,紧跟着接着移动,构成连续的动画效果。
引用效果如下:

<luck-draw hasResult="{{hasResult}}" isWinPrize="{{isWinPrize}}" bind:getResult="handleLuckDraw"></luck-draw>

hasResult: Boolean,设置是否产生了中奖结果,用于控制动画的结束。
isWinPrize:Boolean,设置是否中奖,用于控制抽奖动画的停止结果。
getResult: 点击抽奖后,会触发这个事件,可以在这个事件里调用抽奖接口,以及控制抽奖动画的结束。
该抽奖组件的详情代码链接:
github抽奖游戏组件源码
该组件是笔者写的一个小程序组件库的一部分,感兴趣的读者可以给个star,欢迎一起来完善。


欢迎关注博主——小圣贤君,有问题可以留言哦~

小程序组件库开发之抽奖游戏组件相关推荐

  1. 支付宝小程序组件库开发之自定义switch组件

    支付宝小程序在官方文档上已经给出了switch组件,点击这里直达Switch,官方给出的示例是这样的: 结果实现出来是这样的: 卧槽,坑了,有点不爽,那就自己写一个吧,也不费多大的事,下面看效果: 这 ...

  2. 修改源码实现小程序UI库iview weapp的modal组件自定义宽高

    记一下小程序端UI库iview weapp的modal模态窗自定义样式修改 因为项目需要在模态窗中显示内容,小程序端的iview没有类似popup这种的弹出框,所以就选择了modal对话框来承载弹出内 ...

  3. 微信小程序组件库开发记录

    微信小程序组件库开发记录 背景 前言 技术选型 环境搭建 安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片 拷贝文件到另一个目录 删除目录 整合 创 ...

  4. 《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List(一)

    大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是 由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...

  5. 小程序用vue开发可以吗,vue直接开发小程序

    一个完全的小白想学微信小程序开发,请问要学 谷歌人工智能写作项目:小发猫 编写微信小程序所需要的基础 前端一般就是vue+element,然后起码的html5,css3,javascript等基础知识 ...

  6. 微信小程序wepy框架开发资源汇总

    开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序??代码示例,使用w ...

  7. 小程序插件的开发到引入,这一篇文章就够了

    一.小程序插件功能介绍 1.如何理解插件 插件,英文名可称作"Plug-in.Plugin.add-in.addin.add-on.addon或extension",是一个依附于主 ...

  8. 小程序 移植 云开发_使用Kubernetes探索跨云的应用程序可移植性

    小程序 移植 云开发 本文与Lindsey Tulloch共同撰写. 在一个快速迁移到云的世界中,投资者,客户和开发人员正在屏息地注视着"云战争". 随着云巨头的崛起以及新型基础架 ...

  9. 微信小程序经典案例开发(微信开发)

    课程介绍: 非常值得推荐的一套微信小程序开发视频教程,来自极客学院全套的微信实战开发程序,值得学习 -------------------课程目录------------------- ├<; ...

最新文章

  1. (5.2) Tomcat 8 源码, 初始化组件
  2. 2017-2-15从0开始前端学习笔记(HTML)-图片-表格-表单
  3. 提取pfx证书公钥和私钥
  4. java -jar 启动优化_Android 8.1 启动时间优化--耗时分析
  5. 记-更改配置而不需停止并重新启动服务
  6. JS——实现短信验证码的倒计时功能(没有验证码,只有倒计时)
  7. phpExcel使用方法二
  8. 踩坑事件:windows操作系统下的eclipse中编写SparkSQL不能从本地读取或者保存parquet文件
  9. 不加好友实现QQ在线代码状态临时会话
  10. 手把手教你在 Vue 中使用 JSX,不怕学不会!【建议收藏】
  11. CMD命令下载远程文件
  12. 基于linux的软件测试,基于linux的Web服务器性能测试
  13. VR,“看房”容易“卖房”难
  14. java中stringBuilder的用法(转)
  15. html5页面风格,H5页面的设计风格有哪些?
  16. Appium + IOS 自动化环境搭建教程(实践+总结+踩坑)
  17. Windows桌面图片打开慢的原因 wyz_csdn
  18. 万年历(c语言)编程,C语言实现的万年历
  19. Java用for循环嵌套*输出一个长方形
  20. c++如何保留两位小数

热门文章

  1. python布尔类型运算_python基础之布尔运算、集合
  2. STM32通用和复用功能IO
  3. json-C使用小结
  4. S3C2440对Nand Flash操作和电路原理(基于K9F2G08U0A)
  5. 贝叶斯信念网络Bayes Belief network
  6. 【LeetCode】剑指 Offer 48. 最长不含重复字符的子字符串
  7. 《深入理解 Spring Cloud 与微服务构建》第一章 微服务简介
  8. Java高级开发工程师面试考纲
  9. HDU 6165 FFF at Valentine
  10. python ftplib下载文件封装