小程序红包雨的实现示例
时间:2019-02-19
这篇文章主要介绍了小程序红包雨的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
前言
话不多少先上效果,引入很简单,将/components/s-packetrain/index放到你的组件文件夹中
直接引用就可以了。
首先你要先在页面引入组件
index.json 引用组件
{ "navigationBarTitleText": "红包雨", "usingComponents": { "s-packetrain": "/components/s-packetrain/index" } }
index.wxml
<!--pages/packetRain/index.wxml--> <view class="container"> <image mode="aspectFit" src="/assets/logo.png"></image> <view class='title'>Soul Weapp</view> <view>红包雨</view> </view> <!--红包雨组件--> <s-packetrain visible="{{visible}}" time="{{time}}" readyTime="{{readyTime}}" min="{{min}}" max="{{max}}" bindfinish="doFinish"></s-packetrain>
index.js
Page({ data: { visible: true, time: 15, readyTime: 3, min: 1, max: 5 }, onLoad: function(options) { this.init() }, // 初始化红包雨 init() { this.setData({ time: 15, // 游戏时间 readyTime:3, // 准备时间 min: 1, // 金额最小是1 max: 5 // 金额最大是5 }) }, // 结束 doFinish() { this.setData({ visible: false // 隐藏界面 }) } })
组件在 /components/s-packetrain/index
需要引入cax,HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- PHP验证手机号码和归属地 PHP函数代码
- 浅谈PHP 5中垃圾回收算法的演化
- POJ 2484 A Funny Game(智商博弈)
- php pathinfo()的用法
- BZOJ 1874: [BeiJing2009 WinterCamp]取石子游戏(SG函数)
- 微信公众平台开发
- BZOJ 1115: [POI2009]石子游戏Kam (阶梯nim)
- php性能监测模块XHProf
- BZOJ 1022: [SHOI2008]小约翰的游戏John (Anti-nim)
- 洛谷P2252 取石子游戏(威佐夫博弈)
- HDU 3032 Nim or not Nim?(Multi-Nim)
- POJ 2311 Cutting Game(二维SG+Multi-Nim)
- js去掉html标签和去掉字符串文本的所有的空格
- php操作memcache的使用测试总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 不转字符串判断——LeetCode题目9:回文数
- 关于双指针的简单理解
- 面试题噩梦之一——LeetCode题目10:正则表达式匹配
- 什么时候触发GC
- 找找数学上的规律——LeetCode题目11:盛最多水的容器
- Java学习笔记, 不断更新
- 这题真是送分——LeetCode题目12:整数转罗马数字
- 该了解一波了!零基础入门Nginx
- 轻松一刻——LeetCode题目13:罗马数字转整数
- 动动手——LeetCode题目14:最长公共前缀
- LeetCode题目15:三数之和
- 三数之和姊妹题——LeetCode题目16:最接近的三数之和
- 组合问题——LeetCode题目17:电话号码的字母组合
- Python读取PDF文档并翻译
- n数之和题目要类比——LeetCode题目18:四数之和