WeChat applet development uses loading component to display loading animation method

When we learn the WeChat applet, we should encounter situations where we need to wait for loading picturesoranimations. So how should we write this waiting screen? Today we will write such a small tutorial.
Let’s look at the renderings first:

Important code
1. Home page 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>

The above is the detailed content of WeChat applet development uses loading component to display loading animation method. For more information, please follow other related articles on the PHP Chinese website!