ReactHooks——制作一个简单的loading

HarryHY

于 2022-02-28 23:22:27 发布

阅读量443

点赞数

CC 4.0 BY-SA版权

分类专栏： # RCHooks 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/HarryHY/article/details/123195138

RCHooks 专栏收录该内容

23 篇文章

订阅专栏

这篇博客展示了如何在React应用中使用useState钩子创建一个简单的加载效果。通过修改状态变量控制加载div的显示和隐藏，结合setTimeout实现延迟关闭。同时，提供了一个点击按钮触发加载效果的交互例子，涉及到了CSS动画和组件状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  const [loding, setloding] = useState(false); //loding
  const changeloding = () => {
    setloding(true);
    setTimeout(() => {
      setloding(false);
    }, 1000);
  };
  //正常情况下请求接口
    const geturl = async()=>{
    try {
      setloding(true);
    } catch (error) {
      
    }finally{
      setloding(false);
    }
  }

less

.buttondiv{
    width: 250px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    position: relative;
    background-color: yellow;
    color: #0f0;
}
.lodingdiv{
    width: 100%;
    height: 40px;
    background-color: #666;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.loding {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 3px solid hsla(185, 100%, 62%, 0.2);
    border-top-color: #3cefff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

结构

      <div className="buttondiv">
        <span>这是一个小小的button</span>
        <div className="lodingdiv" style={loding ? {} : { display: "none" }}>
          <div className="loding" ></div>
        </div>
      </div>
      <button
        onClick={() => {
          changeloding();
        }}
      >
        changeloding
      </button>