SoFunction
Updated on 2025-04-07

react implements native drop-down refresh

React has made a small change based on vue drop-down refresh for your reference. The specific content is as follows

I wrote it in js and convert it into jsx format using jsx files. If you use the downloaded react project, you need to change it slightly.

html code

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!-- This is introducedjschangejsxSyntax Files-->
    <script src="js/"></script>
    <script src="js/"></script>
    <script src="js/"></script>
</head>
 
<body>
    <div ></div>
 
</body>
</html>

css code

<style>
        .box {
            text-align: center;
            height: 600px;
            width: 100vw;
            background-color: orange;
            position: absolute;
            left: 0;
            top: 0;
        }
 
        .car {
            text-align: center;
            margin: auto;
            width: 199px;
            height: 60px;
            line-height: 60px;
            background-position: 0 0;
            background-size: 100% auto;
        }
</style>

js code

&lt;script type="text/babel"&gt;
    const root = ('#root')
    class Comp extends  {
        constructor(...args) {
            super(...args)
        }
        fnstart(ev) {
             = 
             = 0;
             = [0].pageY - ;
 
             = (this);
             = ;
 
            //  &amp;&amp; ();
        }
        fnmove(ev) {
            [0].innerHTML = 'Drive down to refresh'
             = [0].pageY - ;
            if ( &gt; 0.12) {
                 = 1 -  / 200;
 
            } else {
                 = 0.12;
            }
             =  * 
            // if ( &gt; 50) {
            //      = 50
            // }
             =  *  + "px";
        }
        fnEnd(ev) {
            // ()
            ([0].innerHTML = 'Refreshing...')
 
             = 
             = null;
             = null;
            setTimeout(() =&gt; {
 
                 = 0;
                 = ".3s ease all";
                ("transitionend", () =&gt; {
                     = null;
                });
            }, 3000);
        }
 
        render() {
            return (
                &lt;div className="car-box"&gt;
                    &lt;div className="car"&gt;Pull down to refresh&lt;/div&gt;
                    &lt;div className="box" onTouchStart={(this)}&gt;
                        &lt;div className="con-txt"&gt;Pull-up refresh&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div &gt;)
        }
    }
    (&lt;Comp /&gt;, root)
&lt;/script&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.