小程序紅包雨的實(shí)現(xiàn)示例
更新時(shí)間：2019年02月19日 14:57:45 作者：乖摸摸頭
這篇文章主要介紹了小程序紅包雨的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
前言
話(huà)不多少先上效果,引入很簡(jiǎn)單，將/components/s-packetrain/index放到你的組件文件夾中
直接引用就可以了。
首先你要先在頁(yè)面引入組件
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, // 游戲時(shí)間
readyTime:3, // 準(zhǔn)備時(shí)間
min: 1, // 金額最小是1
max: 5 // 金額最大是5
})
},
// 結(jié)束
doFinish() {
this.setData({
visible: false // 隱藏界面
})
}
})
組件在 /components/s-packetrain/index
需要引入cax，HTML5 Canvas 2D Rendering Engine - 小程序、小游戲以及 Web 通用 Canvas 渲染引擎
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript 高性能之遞歸，迭代，查表法詳解及實(shí)例
這篇文章主要介紹了Javascript 高性能之遞歸，迭代，查表法詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
Javascript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方式分享
這篇文章介紹了Javascript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方式，有需要的朋友可以參考一下2013-10-10
本篇文章主要是對(duì)js日期、星座的級(jí)聯(lián)顯示代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
js學(xué)習(xí)心得_一個(gè)簡(jiǎn)單的動(dòng)畫(huà)庫(kù)封裝tween.js
下面小編就為大家?guī)?lái)一篇js學(xué)習(xí)心得_一個(gè)簡(jiǎn)單的動(dòng)畫(huà)庫(kù)封裝tween.js。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
弄了個(gè)很簡(jiǎn)單的例子判斷IE瀏覽器版本是否過(guò)低，注意在IE6和IE7版本較低情況下下才看到它的提示效果，需要的朋友可以收藏下2013-11-11
JavaScript給url網(wǎng)址進(jìn)行encode編碼的方法
這篇文章主要介紹了JavaScript給url網(wǎng)址進(jìn)行encode編碼的方法,實(shí)例分析了javascript中encodeURIComponent函數(shù)的使用技巧,需要的朋友可以參考下2015-03-03
js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面彈出自定義文字效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面彈出自定義文字效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
本文主要介紹了javascript的異步編程相關(guān)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
js正則表達(dá)exec與match的區(qū)別說(shuō)明
本篇文章主要是對(duì)js正則表達(dá)exec與match的區(qū)別進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
原生javascript如何實(shí)現(xiàn)共享onload事件
這篇文章主要介紹了原生javascript如何實(shí)現(xiàn)共享onload事件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07