小程序红包雨的实现示例


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 相关文章推荐
根据地区不同显示时间的javascript代码
Aug 13 Javascript
javascript 原型继承介绍
Aug 30 Javascript
在JavaScript中使用timer示例
May 08 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
vue3.0 上手体验
Sep 21 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把session写入数据库示例
2014/02/26 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP简单日历实现方法
2016/07/20 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
Jquery 动态生成表格示例代码
2013/12/24 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python random模块用法解析及简单示例
2017/12/18 Python
python日志模块logbook使用方法
2019/09/19 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
业务主管岗位职责
2013/11/20 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
外贸专业求职信
2014/03/09 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
保护环境的建议书
2014/03/12 职场文书
任命书怎么写
2014/06/04 职场文书
松材线虫病防治方案
2014/06/15 职场文书
教师个人发展总结
2015/02/11 职场文书
公司人力资源管理制度
2015/08/05 职场文书