微信小程序红包雨效果：轻松点亮节日气氛

2023-11-01 18:03:50

微信小程序中实现红包雨效果

最近在工作中接触到了一个红包雨的需求，涉及到的知识点主要是CSS3动画和WXS响应事件的处理等，活不多说，下面我们来看具体的实现步骤吧。

一、准备工作

首先，我们需要准备一些素材，包括红包的图片和背景图片。红包的图片可以根据自己的喜好设计，背景图片建议选择一些比较喜庆的图片。

二、HTML结构

<view class="container">
  <view class="red-packet" wx:for="{{ redPackets }}" wx:key="{{ item.id }}" data-id="{{ item.id }}" bindtap="getRedPacket">
    <image src="{{ item.image }}"></image>
  </view>
</view>

在HTML结构中，我们使用了一个container作为容器，里面使用了一个view来循环红包，并绑定了一个getRedPacket事件。

三、CSS样式

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.red-packet {
  position: absolute;
  width: 100px;
  height: 100px;
  animation: red-packet-fall 1s linear infinite;
}

@keyframes red-packet-fall {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

在CSS样式中，我们对container设置了相对定位，并对red-packet设置了绝对定位和动画效果。动画效果是一个线性的下落效果，持续时间为1s，并且无限循环。

四、WXS事件

getRedPacket(e) {
  console.log(e.currentTarget.dataset.id);
}

在WXS事件中，我们监听了red-packet的点击事件，并输出当前红包的id。

五、完整代码

// index.js
Page({
  data: {
    redPackets: [
      { id: 1, image: 'https://example.com/red-packet-1.png' },
      { id: 2, image: 'https://example.com/red-packet-2.png' },
      { id: 3, image: 'https://example.com/red-packet-3.png' },
    ],
  },

  getRedPacket(e) {
    console.log(e.currentTarget.dataset.id);
  },
});