小程序红包雨的实现示例


Posted in Javascript onFebruary 19, 2019

前言

话不多少先上效果,引入很简单,将/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 渲染引擎

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js对象数组按属性快速排序
Jan 31 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
关于Layui Table隐藏列问题
Sep 16 Javascript
关于Vue中的options选项
Mar 22 Vue.js
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 #Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 #jQuery
Vue 实现手动刷新组件的方法
Feb 19 #Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 #jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 #jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 #jQuery
详解vue几种主动刷新的方法总结
Feb 19 #Javascript
You might like
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
Python的类实例属性访问规则探讨
2015/01/30 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python实现rsa加密实例详解
2017/07/19 Python
vscode 远程调试python的方法
2017/12/01 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
党员年终民主评议的自我评价
2013/11/05 职场文书
科技之星事迹材料
2014/06/02 职场文书
节水口号标语
2014/06/19 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
社区文明倡议书
2015/04/28 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript