微信小程序页面在调取到接口数据之前是加载中状态

首先，我们先建一个文件夹，文件目录如下：

wxml代码如下：

<template name="loading">
  <view class="loadingData">
    <image src="/images/menu/loadingData.gif"></image>
    <text>数据加载中</text>
  </view>
</template>

其余文件默认即可

然后我们在要调这个加载状态的页面引入这个文件，wxml代码如下：

    <import src="/pages/template/loading/loading.wxml" />
    <view hidden="{{loading}}">
    页面加载完毕
   </view>
     <view hidden="{{!loading}}" style="height: 100%">
      <template is="loading" />
    </view>

js文件中将定义loading，初始值为true：

data: {
    loading: true,
  },

然后我们接口请求方法里面将loading值设为false

onLoad: function() {
    var that = this;
    var url = "/xx/xx/xx";//个人隐私，将地址隐藏了
    //此处调用接口为我封装的方法
    util.wxRequest(url, null, null, function(data) {
      var swiperArr = data;
      that.setData({
        swiperArr: swiperArr,
        loading:false
      })
    }, null, that);
  },

这样我们就能成功实现在页面调用到接口数据之前，是加载中状态了，等到页面调用到数据接口，显示页面数据。效果如下：