小程序红包雨的实现示例


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 08 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
微信小程序可滑动周日历组件使用详解
Oct 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 中使用随机数的三个步骤
2006/10/09 PHP
初识php MVC
2014/09/10 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
Python教程之全局变量用法
2016/06/27 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
导致python中import错误的原因是什么
2020/07/01 Python
金鑫耀Java笔试题
2014/09/06 面试题
学校运动会开幕演讲稿
2014/01/04 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2015年工商所工作总结
2015/05/21 职场文书
我的长征观后感
2015/06/09 职场文书
老人院义工活动感想
2015/08/07 职场文书
2016年校长新年寄语
2015/08/17 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python