我們在學習微信小程式時,應該會遇到載入圖片或動畫需要等待的情況,那麼這個等待的畫面我們該怎麼寫呢?今天我們就寫一個這樣的小教學。
先來看效果圖:
重要程式碼
1.首頁程式碼:
<view class="copyright"> <view class="copyright_item">CopyRight:All Right Reserved</view> <view class="copyright_item">原创作者:HTML51.COM</view> <view class="copyright_item">微信小程序开发者社区:51小程序</view> <view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view> <view class="goto_counter"><button type="default" bindtap="goto_counter">点击进入弹出loading加载框页面</button></view> </view>
2..js程式碼
Page({ data: { loadingHidden: true }, loadingTap: function(){ this.setData({ loadingHidden: false }); var that = this; setTimeout(function(){ that.setData({ loadingHidden: true }); that.update(); }, 3000); } })
loading頁面代碼
<loading hidden="{{loadingHidden}}"> 加载中... </loading> <button type="default" bindtap="loadingTap">点击弹出loading</button>
以上是微信小程式開發使用loading元件顯示載入動畫方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!