效果：效果為動態(tài)

?一：wxml片段

<scroll-view scroll-y="true"><!-- 頁面內(nèi)容 --> </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({/*** 頁面的初始數(shù)據(jù)*/data: {snows: [],animation: [],dateTime: "",},/*** 生命周期函數(shù)--監(jiān)聽頁面顯示*/onShow() {this.initSnow();this.data.snows = [];this.data.animation = [];let j = 50while (j--)this.data.snows.push(Math.floor(Math.random() * 700))this.setData({snows: this.data.snows})},/*** 生命周期函數(shù)--監(jiān)聽頁面隱藏*/onHide() {clearTimeout(this.data.dateTime)this.setData({snows: [],animation: []})},/*** 生命周期函數(shù)--監(jiān)聽頁面卸載*/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; }

總結(jié)

以上是生活随笔為你收集整理的微信小程序雪花背景(动态)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。