微信小程序-loading提示框

微信小程序开发中如果请求时间过长或者数据刷新的等待过程中让页面显示更加人性化，都可以可以使用 loading 组件，下面简单分享使用 loading 的两种方式。

第一种使用 wx.showLoading(OBJECT)

API ：https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html#wxshowtoastobject

直接上代码 ：

wx.showLoading({
  title: '加载中',
})

显示 loading 提示框, 需主动调用 wx.hideLoading 才能关闭提示框，设置几秒后隐藏。

setTimeout(function(){
  wx.hideLoading()
},2000)

第二种使用 <loading></loading>

<view><loading wx:if="{{hiddenLoading}}">加载中</loading></view>

 js代码：

Page({
  data:{
    hiddenLoading: true
  },

  // 页面初始化 options 为页面跳转所带来的参数
  onLoad:function(options){ 
    this.setData({
       hiddenLoading: true
    })
  },
 
})

效果如图：

第三种使用 注意许多博客都没有提到的噢，使用自己需要的git动画

<view wx:if="{{hothidden}}">
  <image class='loadimg' src="../../images/loading.gif" mode="aspectFill" /> 
       正在载入更多...
</view>

显示通过 js 来控制：参考上面js代码，效果如下：

以上是使用 loading 提示框的三种简单方式，有兴趣的可以一试。

水平有限，若有问题请留言交流！

互相学习，共同进步：） 转载请注明出处谢谢！