欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)紅包雨功能

 更新時間:2018年07月11日 10:37:53   作者:北風(fēng)_TZ  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)紅包雨功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文為大家分享了微信小程序?qū)崿F(xiàn)紅包雨的具體代碼,供大家參考,具體內(nèi)容如下

今天有個小師妹來問我怎樣用微信小程序?qū)崿F(xiàn)紅包雨效果,如果用web很好實現(xiàn),但是小程序不是那么容易,整合自己也有一年沒摸過小程序了,決定試一試。

首先明確“紅包雨”的需求:

  • 隨機(jī)位置掉落
  • 隨機(jī)紅包樣式
  • 同一時間掉落個數(shù)隨機(jī)
  • 每個紅包的掉落速度隨機(jī),但不能太快也不能太慢

首先看看我做的效果吧

    首先明確小程序?qū)崿F(xiàn)紅包雨和web網(wǎng)頁實現(xiàn)紅包雨難點(diǎn)上有什么不同:

  • 小程序不能直接操作dom,web網(wǎng)頁可以操作
  • 小程序循環(huán)渲染wx:for內(nèi)無法執(zhí)行animation,web網(wǎng)頁中animation執(zhí)行無條件約束
  • 小程序修改樣式屬性需要通過數(shù)據(jù)綁定無法直接修改,web網(wǎng)頁可以直接取dom元素進(jìn)行修改

    好了那么問題來了怎樣實現(xiàn)生成紅包雨呢?小程序無法直接操作dom也就意味著不能向dom內(nèi)添加元素,這里我的解決辦法是先生成預(yù)設(shè)個數(shù)的紅包在視窗外部(用戶看不到),然后修改每個紅包的樣式來實現(xiàn)動畫(當(dāng)然用css keyframes幀動畫也可以,我這里使用的是js修改屬性)

話不多說直接上代碼吧,代碼內(nèi)有注釋

wxml:

<view wx:for="{{packetList}}" wx:for-index="index" wx:for-item="items">
 <image class="red-packet" src="{{items.src}}" style="position:fixed;top:{{items.top}}px;left:{{items.left}}px;-webkit-transition:{{items.speed}}ms linear 0ms;transition:{{items.speed}}ms linear 0ms">
 </image>
</view>

wxss:

.red-packet{
 width: 20px;
 height: 25px;
 z-index: 100;
 transition-property:transform,top;
 transform-origin:50% 50% 0;
 -webkit-transition-property:transform,top;
 -webkit-transform-origin:50% 50% 0;
}

js:

Page({
 
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 windowWidth:"",//窗口寬度
 windowHeigh:"",//窗口高度
 packetList:[{}],//紅包隊列
 packetNum:200,//總共紅包的數(shù)量
 showInter:''// 循環(huán)動畫定時器
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {
 var that = this;
 
 // 獲取手機(jī)屏幕寬高
 wx.getSystemInfo({
  success: function (res) {
  that.setData({
   windowWidth: res.windowWidth,
   windowHeigh: res.windowHeight,
   top: res.windowHeight-100 //設(shè)置紅包初始位置
  })
  }
 })
 
 //建立臨時紅包列表
 var packetList=[];
 //建立臨時紅包圖片數(shù)組
 var srcList = ["../images/packet-one.png", "../images/packet-two.png"];
 //生成初始化紅包
 for(var i=0;i<that.data.packetNum;i++){
  // 生成隨機(jī)位置(水平位置)
  var left = Math.random() * that.data.windowWidth-20;
  // 優(yōu)化位置,防止紅包越界現(xiàn)象,保證每個紅包都在屏幕之內(nèi)
  if(left<0){
  left+=20;
  } else if (left > that.data.windowWidth){
  left-=20;
  }
  // 建立臨時單個紅包
  var packet = {
  src: srcList[Math.ceil(Math.random() * 2) - 1],
  top: -30,
  left:left,
  speed:Math.random() * 2500+3000  //生成隨機(jī)掉落時間,保證每個掉落時間保持在3秒到5.5秒之間
  }
  // 將單個紅包裝入臨時紅包列表
  packetList.push(packet);
  // 將生成的臨時紅包列表更新至頁面數(shù)據(jù),頁面內(nèi)進(jìn)行渲染
  that.setData({
  packetList: packetList
  })
 }
 
 // 初始化動畫執(zhí)行當(dāng)前索引
 var tempIndex=0;
 // 開始定時器,每隔1秒掉落一次紅包
 that.data.showInter=setInterval(function(){
  // 生成當(dāng)前掉落紅包的個數(shù),1-3個
  var showNum = Math.ceil(Math.random() * 3);
  // 防止數(shù)組越界
  if (tempIndex * showNum>=that.data.packetNum){
  // 如果所有預(yù)生成的紅包已經(jīng)掉落完,清除定時器
  clearInterval(that.data.showInter);
  }else{
  switch (showNum){
   case 1:
   //設(shè)置臨時紅包列表當(dāng)前索引下的top值,此處top值為動畫運(yùn)動的最終top值 
   packetList[tempIndex].top = that.data.windowHeigh;
   // 當(dāng)前次掉落幾個紅包,索引值就加幾
   tempIndex+=1;
   break;
   case 2:
   packetList[tempIndex].top = that.data.windowHeigh;
   packetList[tempIndex + 1].top = that.data.windowHeigh;
   tempIndex+=2;
   break;
   case 3:
   packetList[tempIndex].top = that.data.windowHeigh;
   packetList[tempIndex + 1].top = that.data.windowHeigh;
   packetList[tempIndex + 2].top = that.data.windowHeigh;
   tempIndex += 3;
   break;
   default:
   console.log();
  }
  // 更新紅包列表數(shù)據(jù)
  that.setData({
   packetList: packetList
  })
  }
 },1000)
 }
})

好了紅包雨就這樣實現(xiàn)了,其實還是蠻有意思的。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS實現(xiàn)同時搜索百度和必應(yīng)的方法

    JS實現(xiàn)同時搜索百度和必應(yīng)的方法

    這篇文章主要介紹了JS實現(xiàn)同時搜索百度和必應(yīng)的方法,可實現(xiàn)在底部的兩個框架中同時顯示兩個搜索引擎的搜索結(jié)果,是非常實用的技巧,需要的朋友可以參考下
    2015-01-01
  • JavaScript函數(shù)的使用教程

    JavaScript函數(shù)的使用教程

    這篇文章主要介紹了JavaScript函數(shù)的使用教程,JavaScript函數(shù)是被設(shè)計為執(zhí)行特定任務(wù)的代碼塊。JavaScript函數(shù)會在某代碼調(diào)用它時被執(zhí)行。文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • 用javascript動態(tài)注釋掉HTML代碼

    用javascript動態(tài)注釋掉HTML代碼

    用javascript動態(tài)注釋掉HTML代碼...
    2006-09-09
  • JS繼承定義與使用方法簡單示例

    JS繼承定義與使用方法簡單示例

    這篇文章主要介紹了JS繼承定義與使用方法,結(jié)合完整實例形式分析了JavaScript繼承的基本定義、用法及操作注意事項,需要的朋友可以參考下
    2020-02-02
  • JavaScript實現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能示例

    JavaScript實現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能示例

    這篇文章主要介紹了JavaScript實現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能,涉及javascript日期與時間相關(guān)操作及運(yùn)算操作技巧,需要的朋友可以參考下
    2017-02-02
  • JS+Canvas實現(xiàn)自定義頭像功能

    JS+Canvas實現(xiàn)自定義頭像功能

    本文主要為大家詳細(xì)介紹了如何利用JS+Canvas實現(xiàn)自定義頭像功能,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)有一定的幫助,感興趣的小伙伴可以了解一下
    2022-06-06
  • 只出現(xiàn)一次的提示信息(js+cookies)

    只出現(xiàn)一次的提示信息(js+cookies)

    只顯示一次的提示信息,刷新一頁面或第二次來到這個頁面,就不會再彈出提示窗口了,用在網(wǎng)頁上是想當(dāng)實用的吧,因為很多人都不希望經(jīng)常彈出什么窗口,本效果因此會提升用戶體驗,讓用戶喜歡你的網(wǎng)頁
    2013-03-03
  • javascript CSS畫圖之基礎(chǔ)篇

    javascript CSS畫圖之基礎(chǔ)篇

    要在瀏覽器上動態(tài)地畫圖(矢量圖),個人覺得矢量圖中最關(guān)鍵的兩點(diǎn).
    2009-07-07
  • PHPMyAdmin導(dǎo)入時提示文件大小超出PHP限制的解決方法

    PHPMyAdmin導(dǎo)入時提示文件大小超出PHP限制的解決方法

    這篇文章主要介紹了PHPMyAdmin導(dǎo)入時提示文件大小超出PHP限制的解決方法,造成這個問題的原因是PHP上傳大小限制為2MB,修改PHP.ini配置即可解決這問題,需要的朋友可以參考下
    2015-03-03
  • js正則匹配出所有圖片及圖片地址src的方法

    js正則匹配出所有圖片及圖片地址src的方法

    這篇文章主要介紹了js正則匹配出所有圖片及圖片地址src的方法,涉及javascript正則匹配及頁面元素操作的相關(guān)技巧,需要的朋友可以參考下
    2015-06-06

最新評論