微信小程序雪花背景(动态)
生活随笔
收集整理的這篇文章主要介紹了
微信小程序雪花背景(动态)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果:效果為動態(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 模型的指数移动平均EMA
- 下一篇: VR全景视频应当如何制作?优势又是有哪些