微信小程序封装全局加载动画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 生命周期方法中使用。

相关推荐
2501_9160074742 分钟前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者83 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
努力就够了3 小时前
微信小程序:日常零售供应系统
微信小程序·erp·接单·零售系统
说私域3 小时前
基于开源AI大模型、AI智能名片与S2B2C商城小程序的购物中心精准零售数据架构研究
人工智能·小程序·开源
说私域4 小时前
开源链动2+1模式、AI智能名片与S2B2C商城小程序:社群经济的数字化重构路径
人工智能·小程序·开源
peachSoda74 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
2501_915909065 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
云起SAAS6 小时前
ai周公解梦抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·ai周公解梦
Jing_jing_X8 小时前
微信小程序开发踩坑记:从AI工具翻车到找到合适方案
人工智能·ai·小程序·产品运营·个人开发
一匹电信狗9 小时前
【MySQL】数据库的相关操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序