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

小程序提供的动画实在是太难用,为了保证抽奖动画的连贯性,每一列实际上放了至少三个连在一起的图片,按照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. iOS 开发之沙盒机制 文件操作 (NSFielManager)
  2. adb连接夜神模拟器
  3. smarty课程---最最最简单的smarty例子
  4. 【Python】自定义排序函数 - 示例
  5. EditPlus软件自动补全文档htmlbar.acp设置 及 模板文件格式
  6. Android下基于线程池的网络访问基础框架
  7. 连接Oracle时报错ORA-28547
  8. 中兴路西藏北路到浦东国际机场路线(ddmap20100114)
  9. Hibernate常用Annotation标签说明
  10. 人物关系图谱:ECharts 实现
  11. Shell 获取服务器IP地址
  12. Flash地址空间的数据读取——STM32
  13. sql 根据日期模糊查询SQL Server dateTime类型 模糊查询
  14. 电脑打字不显示汉字咋办
  15. 国家、广东省、深圳市的“智能机器人”扶持政策汇总
  16. direction: rtl;
  17. 2021年宜昌各校高考成绩查询,2021年宜昌高考状元名单公布,宜昌高考状元学校资料及最高分...
  18. 简便的屏幕录像工具screen recorder mac正确安装步骤
  19. asp.net MVC中使用EasyUI Treegrid 树形网格
  20. ip地址不能与网关一致,且修改ens33配置文件后需要重新加载reload再up即可,无需重启reboot生效

热门文章

  1. python微控制器编程从零开始 豆瓣_从零开始(什么是编程)认识python
  2. php只取时间的下士_PHP 获取时间的各种处理方式!
  3. Mysql库及表的基本概念、增删查改操作以及表的约束、多表联查
  4. httpd svn 编译安装_linux下php7安装与Apache配置
  5. java随机安排座位表程序_java – 为长凳生成随机座位表的最有效算法?
  6. 【高校宿舍管理系统】第六章 用户管理和年级管理
  7. Go基础系列:指定goroutine的执行顺序
  8. 为什么用自己的电脑部署服务器之后外网访问不到呢?并且该如何解决这个问题呢?...
  9. 【收藏】请不要做浮躁的人
  10. 《css设计彻底研究》读书笔记之 盒子模型