How to use loading component to display loading animation in WeChat applet

When we learn the WeChat applet, we should encounter the situation that we need to wait for loading pictures or animations, so how should we write this waiting picture? Today we will write such a small tutorial.
First look at the renderings:

Important code
1. Home code:

<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 code

Page({
    data: {
        loadingHidden: true
    },
    loadingTap: function(){
        this.setData({
          loadingHidden: false
        });
        var that = this;
        setTimeout(function(){
          that.setData({
              loadingHidden: true
          });
          that.update();
        }, 3000);
    }
})

loading page code

<loading hidden="{{loadingHidden}}">
        加载中...
</loading>
<button type="default" bindtap="loadingTap">点击弹出loading</button>

Source code download address: http: //bbs.html51.com/t-1087 -...

This article is reproduced in: How to use the loading component to display the loading animation in the ape 2048 WeChat applet

Guess you like