微信小程序雪花背景(动态)

效果：效果为动态

 一：wxml片段

<scroll-view scroll-y="true">
  <!-- 页面内容 -->
</scroll-view>
<view>
  <image wx:for="{{snows}}" wx:key="index" src="/img/snow.png" style="left:{{snows[index]}}rpx" animation="{{animation[index]}}" class='snow' data-index='{{index}}' />
</view>

 二：JS片段

// pages/snows/snows.js
var i = 0;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    snows: [],
    animation: [],
    dateTime: "",
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.initSnow();
    this.data.snows = [];
    this.data.animation = [];
    let j = 50
    while (j--)
      this.data.snows.push(Math.floor(Math.random() * 700))
    this.setData({
      snows: this.data.snows
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    clearTimeout(this.data.dateTime)
    this.setData({
      snows: [],
      animation: []
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    clearTimeout(this.data.dateTime)
    this.setData({
      snows: [],
      animation: []
    })
  },
  initSnow: function () {
    setTimeout(function () {
      let animation = wx.createAnimation({})
      animation.translateY(804).opacity(1).step({
        duration: 4000
      })
      animation.translateY(0).opacity(1).step({
        duration: 0
      })
      this.setData({
        ['snows[' + i + ']']: Math.floor(Math.random() * 700),
        ['animation[' + i + ']']: animation.export()
      })
      i++;
      if (i == 50)
        i = 0
    }.bind(this), 500)
    var dateTime = setTimeout(function () {
      this.initSnow()
    }.bind(this), 100)
    this.setData({
      dateTime,
    })
  },

})

三：WXSS片段

page {
  background: linear-gradient(180deg, #cc66a2 0%, #B8DBF0 100%);
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  height: 100%;
}

.snow {
  width: fit-content;
  position: absolute;
  top: -100rpx;
  width: 30rpx;
  height: 27rpx;
  z-index: 11;
}

.snow:nth-child(2n+2) {
  width: 35rpx;
  height: 33rpx;
}