微信小程序加载中的动画并自动隐藏怎么做_知识铺子

微信小程序自带有这个加载中动画,那么,微信小程序的加载中动画我们要如何实现,并在加载完成后自动隐藏呢?

微信官方加载中demo

  • wx.showLoading({
  • title: ‘加载中’,
  • })
  • setTimeout(function () {
  • wx.hideLoading()
  • }, 2000)

这个代码虽然能用,但用户体验并不好:默认是设置2秒后自动隐藏的定时任务,如果网络质量高,不到1秒加载完成了则加载中显示2秒影响体验;如果网络质量差,加载了超过2秒,加载中动画已经隐藏,页面可能是白屏。

因此,我们开发出了更优方案代码。

首先,我们要把整个提交与加载方案优化成一个function,然后在加载中与加载完毕后分别执行弹窗显示与隐藏,参考代码如下。

  • //现有函数getlist执行加载操作,在函数执行后立即显示加载中弹窗
  • getlist:function(){
  • wx.showLoading({
  • title: ‘加载中’,
  • });

 

  • //接口返回状态码为1时,代表加载成功,此时加载中弹窗隐藏。
  • if(ret.data.status==1){
  • wx.hideLoading(),
  • me.setData({
  • busy:false,
  • }),

温馨提示:

1.由于每个小程序开发都会对应不同的接口,粘贴整段源码也没有任何意义,因此只在此分享核心源码与思路。 2、此弹窗可以在任意页面花式使用,修改title即可。 3、以上操作全部在页面对应的index.js中完成。