首先,我们先建一个文件夹,文件目录如下:
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 = "/仅为示例/";//此处调用接口为我封装的方法,默认成功回调util.wxRequest(url, null, null, function(data) {var swiperArr = data;that.setData({swiperArr: swiperArr,loading:false})}, null, that);},
这样我们就能成功实现在页面调用到接口数据之前,是加载中状态了,等到页面调用到接口数据,显示“页面加载完毕”。效果如下: