小程序组件库开发之抽奖游戏组件
笔者在之前写了一篇关于小程序抽奖游戏组件的文章,当时的设计比较粗糙,组件的可复用性也不是很好,这里笔者新开发了一个抽奖小游戏组件,表现形式上和可复用性上都相对之前有了不小的提升。
读者朋友可以先看一下实际的表现形式:
小程序提供的动画实在是太难用,为了保证抽奖动画的连贯性,每一列实际上放了至少三个连在一起的图片,按照abc,bca,cab的顺序依次排放,每列放置两张,当一张图片移动完毕后,回到另外那张图身后,紧跟着接着移动,构成连续的动画效果。
引用效果如下:
<luck-draw hasResult="{{hasResult}}" isWinPrize="{{isWinPrize}}" bind:getResult="handleLuckDraw"></luck-draw>
hasResult: Boolean,设置是否产生了中奖结果,用于控制动画的结束。
isWinPrize:Boolean,设置是否中奖,用于控制抽奖动画的停止结果。
getResult: 点击抽奖后,会触发这个事件,可以在这个事件里调用抽奖接口,以及控制抽奖动画的结束。
该抽奖组件的详情代码链接:
github抽奖游戏组件源码
该组件是笔者写的一个小程序组件库的一部分,感兴趣的读者可以给个star,欢迎一起来完善。
欢迎关注博主——小圣贤君,有问题可以留言哦~
小程序组件库开发之抽奖游戏组件相关推荐
- 支付宝小程序组件库开发之自定义switch组件
支付宝小程序在官方文档上已经给出了switch组件,点击这里直达Switch,官方给出的示例是这样的: 结果实现出来是这样的: 卧槽,坑了,有点不爽,那就自己写一个吧,也不费多大的事,下面看效果: 这 ...
- 修改源码实现小程序UI库iview weapp的modal组件自定义宽高
记一下小程序端UI库iview weapp的modal模态窗自定义样式修改 因为项目需要在模态窗中显示内容,小程序端的iview没有类似popup这种的弹出框,所以就选择了modal对话框来承载弹出内 ...
- 微信小程序组件库开发记录
微信小程序组件库开发记录 背景 前言 技术选型 环境搭建 安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片 拷贝文件到另一个目录 删除目录 整合 创 ...
- 《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List(一)
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是 由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
- 小程序用vue开发可以吗,vue直接开发小程序
一个完全的小白想学微信小程序开发,请问要学 谷歌人工智能写作项目:小发猫 编写微信小程序所需要的基础 前端一般就是vue+element,然后起码的html5,css3,javascript等基础知识 ...
- 微信小程序wepy框架开发资源汇总
开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序??代码示例,使用w ...
- 小程序插件的开发到引入,这一篇文章就够了
一.小程序插件功能介绍 1.如何理解插件 插件,英文名可称作"Plug-in.Plugin.add-in.addin.add-on.addon或extension",是一个依附于主 ...
- 小程序 移植 云开发_使用Kubernetes探索跨云的应用程序可移植性
小程序 移植 云开发 本文与Lindsey Tulloch共同撰写. 在一个快速迁移到云的世界中,投资者,客户和开发人员正在屏息地注视着"云战争". 随着云巨头的崛起以及新型基础架 ...
- 微信小程序经典案例开发(微信开发)
课程介绍: 非常值得推荐的一套微信小程序开发视频教程,来自极客学院全套的微信实战开发程序,值得学习 -------------------课程目录------------------- ├<; ...
最新文章
- iOS 开发之沙盒机制 文件操作 (NSFielManager)
- adb连接夜神模拟器
- smarty课程---最最最简单的smarty例子
- 【Python】自定义排序函数 - 示例
- EditPlus软件自动补全文档htmlbar.acp设置 及 模板文件格式
- Android下基于线程池的网络访问基础框架
- 连接Oracle时报错ORA-28547
- 中兴路西藏北路到浦东国际机场路线(ddmap20100114)
- Hibernate常用Annotation标签说明
- 人物关系图谱:ECharts 实现
- Shell 获取服务器IP地址
- Flash地址空间的数据读取——STM32
- sql 根据日期模糊查询SQL Server dateTime类型 模糊查询
- 电脑打字不显示汉字咋办
- 国家、广东省、深圳市的“智能机器人”扶持政策汇总
- direction: rtl;
- 2021年宜昌各校高考成绩查询,2021年宜昌高考状元名单公布,宜昌高考状元学校资料及最高分...
- 简便的屏幕录像工具screen recorder mac正确安装步骤
- asp.net MVC中使用EasyUI Treegrid 树形网格
- ip地址不能与网关一致,且修改ens33配置文件后需要重新加载reload再up即可,无需重启reboot生效
热门文章
- python微控制器编程从零开始 豆瓣_从零开始(什么是编程)认识python
- php只取时间的下士_PHP 获取时间的各种处理方式!
- Mysql库及表的基本概念、增删查改操作以及表的约束、多表联查
- httpd svn 编译安装_linux下php7安装与Apache配置
- java随机安排座位表程序_java – 为长凳生成随机座位表的最有效算法?
- 【高校宿舍管理系统】第六章 用户管理和年级管理
- Go基础系列:指定goroutine的执行顺序
- 为什么用自己的电脑部署服务器之后外网访问不到呢?并且该如何解决这个问题呢?...
- 【收藏】请不要做浮躁的人
- 《css设计彻底研究》读书笔记之 盒子模型