小程序红包雨的实现示例


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代码
Nov 20 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
JS作用域链详解
Jun 26 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
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扩展ZF――Validate扩展
2008/01/10 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
js计算页面刷新的次数
2009/07/20 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
详解Vue之事件处理
2020/07/10 Javascript
JS实现多功能计算器
2020/10/28 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
安装Python的教程-Windows
2017/07/22 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python文件操作函数用法实例详解
2019/12/24 Python
python实现FTP循环上传文件
2020/03/20 Python
numpy库reshape用法详解
2020/04/19 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
利用python实现汉诺塔游戏
2021/03/01 Python
户外婚礼策划方案
2014/02/08 职场文书
应届生求职信范文
2014/05/26 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL