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

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

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);},

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

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

微信小程序-页面间如何进行传递数据(通信)
前言在小程序中组件与组件之间的通信是通过在引用组件处,在自定义组件上添加自定义属性实现的,子组件内部通过properties进行接收更多关于组件与组件之间的通信可参考小程序-实现自定义组件以及自定 ...
可免费阅读各种漫画的微信小程序，内附好用的图片懒加载组件
一个基于漫画台App原生应用的漫画阅读的微信小程序.所有漫画可免费观看(前提是得有资源?). 项目地址:github源码 API接口文档:API 前言? 在学习一门新的语言或者框架时,做好的方法应该是 ...
微信小程序（2）--下拉刷新和上拉加载更多
下拉刷新 1.首先在.json文件中配置(如果在app.json文件中配置,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面下拉刷新.) 具体页面的.json文件: ...
微信小程序如何实现上拉刷新（即分页加载数据）？
步骤1. enablePullDownRefresh这个属性设置为true.enablePullDownRefresh可以写在app.json 中和页面的xx.json,两者的区别是, app.j ...
微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面 1 w ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
微信小程序和百度的语音识别接口详解
介绍因为项目需要,使用到了微信小程序和百度的语音接口现在将项目中的一个小模块拿出来单独分享. 技术关键字微微信小程序百度语音接口 nodejs,express fluent-ffmegp 环境 ...
微信小程序和百度的语音识别接口
介绍因为项目需要,使用到了微信小程序和百度的语音接口现在将项目中的一个小模块拿出来单独分享. 技术关键字微信小程序百度语音接口 nodejs,express fluent-ffmegp 环境 ...
微信小程序实现分享里调用接口
微信小程序实现分享里调用接口在开发微信小程序的时候,有一个需求,在点击分享按钮的时候,调用后台的接口,来获取一个分享的值,在分享的时候在分享链接里拼这个值. 初始的想法在onShareAppMes ...

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

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

最新文章

热门文章