介绍一款封装非常好的loading框架AVLoadingIndicatorView

 声明:本文只为介绍自己喜欢的一个框架,不为任何其他目的。

 地址:https://github.com/81813780/AVLoadingIndicatorView

先看效果图:

avi

第一步:

compile 'com.wang.avi:library:2.1.3'

第二步:

 <com.wang.avi.AVLoadingIndicatorView
        android:id="@+id/avi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:indicatorColor="@color/colorRed"
        app:indicatorName="BallSpinFadeLoaderIndicator" />

app:indicatorColor为设置loading的颜色
app:indicatorName为设置loading的样式:

Row 1

  • BallPulseIndicator
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了方便在 React 项目中使用 Ant Design 的 Loading 组件,可以封装一个 Loading 工具类,以便在需要时快速调用。 以下是一个基于 Ant Design 的 Loading 工具类的示例: ```jsx import { Spin } from 'antd'; // 加载中组件 const Loading = () => ( <div style={{ textAlign: 'center', marginTop: 50 }}> <Spin size="large" /> </div> ); // Loading 工具类 class LoadingUtil { static loadingInstance = null; static create() { if (!LoadingUtil.loadingInstance) { LoadingUtil.loadingInstance = Spin; } return LoadingUtil.loadingInstance; } static show() { const LoadingComponent = LoadingUtil.create(); LoadingUtil.loadingInstance = LoadingComponent; LoadingComponent.show(); } static hide() { const LoadingComponent = LoadingUtil.create(); LoadingUtil.loadingInstance = LoadingComponent; LoadingComponent.hide(); } } export default LoadingUtil; ``` 在上面的代码中,首先定义了一个 Loading 组件,它是 Ant Design Spin 组件的包装,用于显示加载中的效果。 然后定义了一个 LoadingUtil 类,它包含了三个静态方法: - `create()` 方法用于创建 Loading 组件实例; - `show()` 方法用于显示 Loading 组件; - `hide()` 方法用于隐藏 Loading 组件。 当需要显示 Loading 时,调用 `LoadingUtil.show()` 方法即可;当需要隐藏 Loading 时,调用 `LoadingUtil.hide()` 方法即可。 使用该 Loading 工具类的示例如下: ```jsx import React, { useState } from 'react'; import LoadingUtil from './LoadingUtil'; function MyComponent() { const [loading, setLoading] = useState(false); const handleButtonClick = () => { setLoading(true); LoadingUtil.show(); // 异步操作 setTimeout(() => { setLoading(false); LoadingUtil.hide(); }, 2000); }; return ( <div> <h1>My Component</h1> <button onClick={handleButtonClick}>Fetch Data</button> {loading && <Loading />} </div> ); } export default MyComponent; ``` 在上面的代码中,当用户点击按钮触发异步操作时,设置 `loading` 状态为 `true`,同时调用 `LoadingUtil.show()` 方法显示 Loading 组件。 当异步操作完成后,设置 `loading` 状态为 `false`,同时调用 `LoadingUtil.hide()` 方法隐藏 Loading 组件。最后在 JSX 中根据 `loading` 状态来决定是否渲染 Loading 组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值