小程序红包雨的实现示例


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 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
Vue如何将页面导出成PDF文件
Aug 17 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
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
javascript一点特殊用法
2008/05/28 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
js实现微信分享代码
2020/10/11 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
python scatter函数用法实例详解
2020/02/11 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
车工岗位职责
2013/11/26 职场文书
音乐教师求职信
2014/06/28 职场文书
五四演讲稿范文
2014/09/03 职场文书
趣味运动会广播稿
2014/09/13 职场文书
入党介绍人意见2015
2015/06/01 职场文书
《学会看病》教学反思
2016/02/17 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript