微信小程序封装全局加载动画loading

思路

封装全局加载动画的核心思路就是在每个页面加载数据时弹出加载动画,在数据加载完成后关闭动画。由于需要在所有页面中使用,我们需要将加载动画封装成一个全局组件,供所有页面调用。

第一步:创建Loading组件

在components新建Loading组件,用来展示动画,并在组件中实现开启和结束动画的方法。

wxml代码:

javascript 复制代码
<view class='loading-mask' wx:if="{{showLoading}}">
  <view class='loading-content'>
    <image class='loading-image' src='/img/loading.gif'></image>
  </view>
</view>

js代码:

javascript 复制代码
// components/loading/loading.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    // 是否显示loading
    showLoading: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 开启动画
    show() {
      this.setData({
        showLoading: true
      });
    },
    // 关闭动画
    hide() {
      this.setData({
        showLoading: false
      });
    }
  }
})

CSS样式:

javascript 复制代码
.loading-mask {
  width: 100vw;
  height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}
.loading-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 160rpx;
  height: 160rpx;
}
.loading-content image{
 width: 100%;
 height: 100%;
}

第二步:在utils\util.js下封装控制方法,导出

设定全局方法loadingShow和loadingHide来显示和隐藏Loading组件。

javascript 复制代码
const loadingShow = function () {
  getCurrentPages()[0].selectComponent("#loading").show()
}
const loadingHide = function () {
  getCurrentPages()[0].selectComponent("#loading").hide()
}
                      
module.exports = {	
  loadingShow,
  loadingHide
}

第三步:在app.json中注册组件

javascript 复制代码
"usingComponents": {
    "Loading": "/components/loading/loading"
  }

第四步:在需要用到加载动画的地方放置组件

比如:index.html

javascript 复制代码
<Loading id="loading"></Loading>

第五步:在app.js中使用Loading组件

javascript 复制代码
导入 import { loadingShow, loadingHide} from "./utils/util";
然后在封装的ajax调用时使用 loadingShow()
调用结束 loadingHide()

注意:在onLaunch调用无效
确保调用 selectComponent 的时机是在组件渲染完成之后,可以在 onReady 或 onLoad 生命周期方法中使用。

相关推荐
汤姆yu2 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域9 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域11 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔11 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun15 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-545815 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ2 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序