小程序红包雨的实现示例


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中日期转换成时间戳的小例子
Mar 21 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 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
实用函数10
2007/11/08 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
基于python实现把图片转换成素描
2019/11/13 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Python 高效编程技巧分享
2020/09/10 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
车间班组长岗位职责
2013/11/13 职场文书
给女儿的表扬信
2014/01/18 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
竞聘上岗演讲
2014/05/19 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
毕业生找工作求职信
2014/08/05 职场文书
理财计划书
2014/08/14 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2014年路政工作总结
2014/12/10 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
nginx访问报403错误的几种情况详解
2022/07/23 Servers