使用原生React编写下拉刷新上拉加载

最新推荐文章于 2024-07-16 17:18:13 发布

小刘一米六

最新推荐文章于 2024-07-16 17:18:13 发布

阅读量1.1k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_62227445/article/details/125184568

版权

本文介绍如何利用原生React编写下拉刷新和上拉加载功能，涉及的关键技术包括React核心库、react-dom和Babel。在React应用中，正确引入react.js、react-dom.js和babel.min.js库至关重要，顺序不能错乱。同时，文章还讨论了CSS与JS的结合，特别是transitionend事件的双相触发机制及其在没有过渡效果时的行为。

摘要由CSDN通过智能技术生成

使用React编写时，记得要引入相应的js库

1、react.js : React核心库

2、react-dom.js:提供操作DOM的React扩展库

3、babel.min.js:解析JSX语法代码转为JS代码的库

React依赖包引入时：注意引入顺序不能乱

css相关内容：


    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0
    }


    #root {
      height: 100%;
      width: 100%
    }


    .car-box {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }


    .box {
      text-align: center;
      height: 100%;
      width: 100vw;
      background-color: rgba(7, 241, 191, 0.901);
      position: relative;
      left: 0;
      top: 0;
    }


    .car,
    .con-txt {
      text-align: center;
      position: absolute;
      margin: auto;
      width: 100%;
      height: 50px;
      line-height: 50px;
      /* background-color: #09c; */