咱们在学习微信小程序时,应该会遇到载入图片或者动画须要等待的状况,那么这个等待的画面咱们应该怎么编写呢?今天咱们就分享这样的小教程。css
很少说了,二当家要上图来啦!web
更多动画自ji关注下载json
<!--index.wxml--> <view class="container"> <view id="loading" hidden="{{loadingHidden}}"> <view id="loading-center"> <view id="loading-center-absolute"> <view class="object" id="object_one"></view> <view class="object" id="object_two"></view> <view class="object" id="object_three"></view> <view class="object" id="object_four"></view> <view class="object" id="object_five"></view> <view class="object" id="object_six"></view> <view class="object" id="object_seven"></view> <view class="object" id="object_eight"></view> <view class="object" id="object_big"></view> </view> </view> </view> </view>
Page({ /** * 页面的初始数据 */ data: { loadingHidden: true }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动做 */ onPullDownRefresh: function () { this.setData({ loadingHidden: false }); var that = this; wx.request({ url: 'https://www.geekxz.com/action/works/recWorks', data: { num: '5' , }, header: { 'content-type': 'application/json' // 默认值 }, success: function(res) { console.log(res.data.data.works); that.setData({ recWorks:res.data.data.works, }) }, complete: function() { // complete wx.hideNavigationBarLoading() //完成中止加载 wx.stopPullDownRefresh() //中止下拉刷新 } }) setTimeout(function(){ that.setData({ loadingHidden: true }); }, 2000); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
#loading{ background-color: #db9e36; height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top: 0px; } #loading-center{ width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; height: 150px; width: 150px; margin-top: -75px; margin-left: -75px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .object{ width: 20px; height: 20px; background-color:#FFF; position: absolute; left: 65px; top: 65px; } .object:nth-child(2n+0) { margin-right: 0px; } #object_one { -webkit-animation: object_one 2s infinite; animation: object_one 2s infinite; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #object_two { -webkit-animation: object_two 2s infinite; animation: object_two 2s infinite; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } #object_three { -webkit-animation: object_three 2s infinite; animation: object_three 2s infinite; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } #object_four { -webkit-animation: object_four 2s infinite; animation: object_four 2s infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } #object_five { -webkit-animation: object_five 2s infinite; animation: object_five 2s infinite; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } #object_six { -webkit-animation: object_six 2s infinite; animation: object_six 2s infinite; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } #object_seven { -webkit-animation: object_seven 2s infinite; animation: object_seven 2s infinite; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } #object_eight { -webkit-animation: object_eight 2s infinite; animation: object_eight 2s infinite; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } #object_big{ position: absolute; width: 50px; height: 50px; left: 50px; top: 50px; -webkit-animation: object_big 2s infinite; animation: object_big 2s infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } @-webkit-keyframes object_big { 50% { -webkit-transform: scale(0.5); } } @keyframes object_big { 50% { transform: scale(0.5); -webkit-transform: scale(0.5); } } @-webkit-keyframes object_one { 50% { -webkit-transform: translate(-65px,-65px) ; } } @keyframes object_one { 50% { transform: translate(-65px,-65px) ; -webkit-transform: translate(-65px,-65px) ; } } @-webkit-keyframes object_two { 50% { -webkit-transform: translate(0,-65px) ; } } @keyframes object_two { 50% { transform: translate(0,-65px) ; -webkit-transform: translate(0,-65px) ; } } @-webkit-keyframes object_three { 50% { -webkit-transform: translate(65px,-65px) ; } } @keyframes object_three { 50% { transform: translate(65px,-65px) ; -webkit-transform: translate(65px,-65px) ; } } @-webkit-keyframes object_four { 50% { -webkit-transform: translate(65px,0) ; } } @keyframes object_four { 50% { transform: translate(65px,0) ; -webkit-transform: translate(65px,0) ; } } @-webkit-keyframes object_five { 50% { -webkit-transform: translate(65px,65px) ; } } @keyframes object_five { 50% { transform: translate(65px,65px) ; -webkit-transform: translate(65px,65px) ; } } @-webkit-keyframes object_six { 50% { -webkit-transform: translate(0,65px) ; } } @keyframes object_six { 50% { transform: translate(0,65px) ; -webkit-transform: translate(0,65px) ; } } @-webkit-keyframes object_seven { 50% { -webkit-transform: translate(-65px,65px) ; } } @keyframes object_seven { 50% { transform: translate(-65px,65px) ; -webkit-transform: translate(-65px,65px) ; } } @-webkit-keyframes object_eight { 50% { -webkit-transform: translate(-65px,0) ; } @keyframes object_eight { 50% { transform: translate(-65px,0) ; -webkit-transform: translate(-65px,0) ; } } }
注:如未能获取成功,或者遇到其余问题,本人微信:geekxz 。小程序
若是须要更多动画,欢迎关注 【极客小寨】微信公众号,回复微信小程序动画下载连接!或者回复资源,获取更多有用技术干货、文档资料。全部文档会持续更新,欢迎关注一块儿成长!微信小程序