小程序紅包雨的實現(xiàn)示例
更新時間：2019年02月19日 14:57:45 作者：乖摸摸頭
這篇文章主要介紹了小程序紅包雨的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
話不多少先上效果,引入很簡單，將/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, // 準(zhǔn)備時間
min: 1, // 金額最小是1
max: 5 // 金額最大是5
})
},
// 結(jié)束
doFinish() {
this.setData({
visible: false // 隱藏界面
})
}
})
組件在 /components/s-packetrain/index
需要引入cax，HTML5 Canvas 2D Rendering Engine - 小程序、小游戲以及 Web 通用 Canvas 渲染引擎
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)獲取手機(jī)號60s倒計時
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)獲取手機(jī)號60s倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JS彈出窗口插件zDialog簡單用法,結(jié)合簡單實例形式分析了zDialog插件彈出窗口的基本使用方法與參數(shù)含義,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了Moment.js實現(xiàn)多個同時倒計時，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
放大鏡大家在各大網(wǎng)站都能見到，下面小編給大家分享一段 ，代碼是基于原生js實現(xiàn)的放大鏡效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-10-10
JavaScript如何通過userAgent判斷幾個常用瀏覽器詳解
userAgent 屬性是一個只讀的字符串,聲明了瀏覽器用于 HTTP 請求的用戶代理頭的值,這篇文章主要給大家介紹了關(guān)于JavaScript如何通過userAgent判斷幾個常用瀏覽器的相關(guān)資料,需要的朋友可以參考下2021-06-06
layui問題之渲染數(shù)據(jù)表格時,僅出現(xiàn)10條數(shù)據(jù)的解決方法
今天小編就為大家分享一篇layui問題之渲染數(shù)據(jù)表格時,僅出現(xiàn)10條數(shù)據(jù)的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
網(wǎng)頁加載時頁面顯示進(jìn)度條加載完成之后顯示網(wǎng)頁內(nèi)容
網(wǎng)頁加載時頁面顯示進(jìn)度條（加載完成時顯示網(wǎng)頁內(nèi)容）,這種效果在瀏覽網(wǎng)頁很常見，本文也介紹一種實現(xiàn)方法，需要了解的朋友可以參考下2012-12-12
本文給大家介紹的是一篇國外網(wǎng)友寫的博客，講解的是關(guān)于實現(xiàn)復(fù)選框選中屬性的問題，感覺非常不錯，翻譯過來推薦給大家，希望小伙伴們能夠喜歡。2015-03-03
本文為大家詳細(xì)介紹下JSF中confirm彈出框的使用方法，感興趣的朋友可以參考下2014-01-01
JavaScript 處理Iframe自適應(yīng)高度(同或不同域名下)
Iframe自適應(yīng)高度一直都備受關(guān)注，接下來為大家介紹下同域名下Iframe自適應(yīng)高度的處理以及跨域時Iframe高度自適應(yīng)，感興趣的朋友可以參考下哈2013-03-03