uni-app微信小程序之紅包雨活動完整源碼
更新時間：2024年01月30日 11:47:47 作者：范特西是只貓
最近公司需求做一個微信紅包雨功能,這里給大家總結(jié)下實現(xiàn)的方法,這篇文章主要給大家介紹了關(guān)于uni-app微信小程序之紅包雨活動的相關(guān)資料,需要的朋友可以參考下
1. 頁面效果
GIF錄屏有點卡，實際比較絲滑
每0.5s掉落一個紅包
控制4s后自動移除紅包
點擊紅包消除紅包（或者自行+1，或者彈窗需求）
2. 頁面樣式代碼
<!-- 紅包雨活動 -->
<template>
<scroll-view scroll-y="true">
<view class="red-envelope-rain">
<view v-for="(redEnvelope, index) in redEnvelopes" :key="index" class="red-envelope"
:style="{ top: redEnvelope.top + 'px', left: redEnvelope.left + 'px' }"
@click="handleRedEnvelopeClick(index)"></view>
</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
redEnvelopes: [],
redEnvelopeInterval: null,
}
},
onLoad(options) {
// 每秒創(chuàng)建一個紅包
setInterval(this.initializeRedEnvelopes, 500);
// 更新紅包位置，約 60 幀
setInterval(this.moveRedEnvelopes, 1000 / 60);
},
beforeDestroy() {
this.stopRedEnvelopeRain();
},
methods: {
initializeRedEnvelopes() {
const numRedEnvelopes = 20; // 紅包數(shù)量
// for (let i = 0; i < numRedEnvelopes; i++) {
const redEnvelope = {
id: Date.now(),
top: 0, // 隨機縱坐標
left: Math.random() * (uni.getSystemInfoSync().windowWidth - 50), // 隨機橫坐標
speed: Math.random() * 6 + 1, // 隨機速度
};
this.redEnvelopes.push(redEnvelope);
setTimeout(() => {
this.redEnvelopes = this.redEnvelopes.filter(p => p.id !== redEnvelope.id);
}, 4000); // 4秒后移除紅包
},
startRedEnvelopeRain() {
this.redEnvelopeInterval = setInterval(() => {
this.moveRedEnvelopes();
}, 1000 / 60); // 每秒60幀
},
stopRedEnvelopeRain() {
clearInterval(this.redEnvelopeInterval);
},
moveRedEnvelopes() {
this.redEnvelopes.forEach((redEnvelope, index) => {
console.log(redEnvelope, "redEnvelopes")
redEnvelope.top += redEnvelope.speed;
if (redEnvelope.top > uni.getSystemInfoSync().windowHeight) {
this.redEnvelopes = this.redEnvelopes.filter(p => p.id !== redEnvelope.id);
}
});
},
// 處理紅包點擊事件，可以增加分數(shù)或顯示提示等操作
handleRedEnvelopeClick(index) {
// 例如：this.score += 1;
// 或者：this.showTip = true;
// 可以根據(jù)實際需求自行添加邏輯
this.redEnvelopes.splice(index, 1); // 點擊后移除紅包
},
}
}
</script>
<style lang="scss">
.red-envelope-rain {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.red-envelope {
position: absolute;
background-image: url('https://i-1.lanrentuku.com/2020/11/4/a9b4bcdb-75f3-429d-9c21-d83d945b088e.png?imageView2/2/w/500');
background-size: 100rpx 100rpx;
background-repeat: no-repeat;
width: 100rpx;
height: 100rpx;
}
</style>附：uniapp仿微信紅包打開動畫效果
<template>
<view>
<view v-if="packerState != 3" class="packer-box flex-column">
<view class="packer-bg anim-ease-in" :class="{ 'anim-fade-out': packerState == 2 }"></view>
<view class="packer-bottom-box anim-ease-in" :class="{ 'anim-out-bottom': packerState == 2 }">
<view class="arc-bottom-edge"></view>
<view class="packer-bottom-bg"></view>
</view>
<view class="packer-top-box anim-ease-in" :class="{ 'anim-out-top': packerState == 2 }">
<view class="flex-row sender-info">
<image class="sender-avatar"></image>
<view>{{'XXX'}}發(fā)出的紅包</view>
</view>
<view class="packer-greeting double-text">{{'恭喜發(fā)財，大吉大利'}}</view>
<view class="arc-edge"></view>
<view v-if="packerState == 1" class="anim-rotate packer-btn-pos">
<view class="packer-btn" style="transform: translateZ(-4px);">開</view>
<view class="packer-btn-middle" v-for="(item, index) in 7" :key="index" :style="{transform: `translateZ(${index - 3}px)`}"></view>
<view class="packer-btn packer-btn-front">開</view>
</view>
<view v-else class="packer-btn packer-btn-pos" @click="openPacker">開</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
packerState: 0
}
},
methods: {
openPacker() {
// 加載數(shù)據(jù)，觸發(fā)硬幣旋轉(zhuǎn)動畫
this.packerState = 1;
this.request(() => {
// 調(diào)用搶紅包接口成功，觸發(fā)開紅包動畫
this.packerState = 2;
// 開紅包動畫結(jié)束后，移除相關(guān)節(jié)點，否則會阻擋其它下層節(jié)點
setTimeout(() => {
this.packerState = 3;
}, 500);
})
},
request(success) {
setTimeout(() => {
success()
}, 3000);
}
}
}
</script>
<style>
.flex-row {
display: flex;
flex-direction: row;
position: relative;
}
.flex-column {
display: flex;
flex-direction: column;
position: relative;
}
.packer-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
color: rgb(235, 205, 153);
padding: 60rpx;
}
.packer-bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
}
.packer-top-box {
width: 600rpx;
background-color: rgb(244, 94, 77);
text-align: center;
margin: auto;
transform: translateY(-160rpx);
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
position: relative;
}
.sender-info {
margin-top: 200rpx;
justify-content: center;
line-height: 60rpx;
font-size: 36rpx;
}
.sender-avatar {
width: 60rpx;
height: 60rpx;
border-radius: 10rpx;
background-color: #fff;
margin-right: 10rpx;
}
.packer-greeting {
font-size: 48rpx;
line-height: 60rpx;
height: 120rpx;
margin: 40rpx 30rpx 200rpx;
}
.arc-edge {
position: relative;
}
.arc-edge::after {
width: 100%;
height: 200rpx;
position: absolute;
left: 0;
top: -100rpx;
z-index: 9;
content: '';
border-radius: 50%;
background-color: rgb(244, 94, 77);
box-shadow: 0 6rpx 6rpx 0 rgba(0, 0, 0, 0.1);
}
.packer-bottom-box {
transform: translate(-50%, 0);
width: 600rpx;
height: 360rpx;
border-bottom-left-radius: 30rpx;
border-bottom-right-radius: 30rpx;
overflow: hidden;
position: absolute;
bottom: calc(50% - 440rpx);
left: 50%;
}
.anim-ease-in {
animation-duration: 0.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.anim-out-top {
animation-name: slideOutTop;
}
.anim-out-bottom {
animation-name: slideOutBottom;
}
.anim-fade-out {
animation-name: fadeOut;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes slideOutTop {
from {
transform: translateY(-160rpx);
}
to {
transform: translateY(-200%);
}
}
@keyframes slideOutBottom {
from {
transform: translate(-50%, 0);
}
to {
transform: translate(-50%, 200%);
}
}
.arc-bottom-edge {
position: relative;
}
.arc-bottom-edge::after {
width: 120%;
height: 200rpx;
position: absolute;
left: -10%;
top: -100rpx;
z-index: 8;
content: '';
border-radius: 50%;
box-shadow: 0 60rpx 0 0 rgb(242, 85, 66);
}
.packer-bottom-bg {
background-color: rgb(242, 85, 66);
height: 280rpx;
margin-top: 100rpx;
}
.packer-btn {
border-radius: 50%;
width: 200rpx;
height: 200rpx;
line-height: 200rpx;
font-size: 80rpx;
text-align: center;
color: #333;
background-color: rgb(235, 205, 153);
box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1);
}
.packer-btn-pos {
transform: translateX(-50%);
position: absolute;
left: 50%;
z-index: 10;
bottom: -200rpx;
}
.packer-btn-front {
position: absolute;
top: 0;
transform: translateZ(4px);
}
.packer-btn-middle {
position: absolute;
top: 0;
border-radius: 50%;
width: 200rpx;
height: 200rpx;
background-color: rgb(235, 180, 120);
}
.anim-rotate {
margin-left: -100rpx;
transform-style: preserve-3d;
animation: rotate 1s linear infinite;
}
@keyframes rotate{
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
</style>
總結(jié)
到此這篇關(guān)于uni-app微信小程序之紅包雨活動的文章就介紹到這了,更多相關(guān)uni-app小程序紅包雨活動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了一個簡單的JS時間控件示例代碼(JS時分秒時間控件)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
一文詳解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中，Map、Set、WeakMap和WeakSet是四個不同的數(shù)據(jù)結(jié)構(gòu)，它們都有不同的特點和用途，本文詳細介紹了Map、Set、WeakMap和WeakSet的用法及區(qū)別，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了js動態(tài)實現(xiàn)表格添加和刪除操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
6種JavaScript判斷對象自身為空的方法小結(jié)
這篇文章主要為大家詳細介紹了6種JavaScript判斷對象自身為空的方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
腳本吧 - 幻宇工作室用到js,超強推薦base.js...2006-12-12
這篇文章主要介紹了基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
Cordova(ionic)項目實現(xiàn)雙擊返回鍵退出應用
這篇文章主要為大家詳細介紹了Cordova項目實現(xiàn)雙擊返回鍵退出應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
JavaScript this在函數(shù)中的指向及實例詳解
這篇文章主要介紹了JavaScript this在函數(shù)中的指向及實例詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
整理關(guān)于Bootstrap模態(tài)彈出框的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap模態(tài)彈出框的慕課筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了JavaScript實現(xiàn)五子棋游戲的方法,結(jié)合實例形式詳細分析了javascript實現(xiàn)五子棋游戲的具體步驟、原理與相關(guān)操作技巧,需要的朋友可以參考下2019-07-07