react 制作一个 从顶部划出的浮层。demo

这个可能更多的就是css样式上的书写，js上很简单就是个状态的控制
封装一个 FloatTop.jsx

import "./index.scss"
const FloatTop  =  ({ children, showMask, handleChange}) => {
    return (
        <div className="float-container">
            <div className="content">
                <div className={`slot-content ${showMask && ' show'}`}>
                    { children }
                </div>
            </div>
            <div onClick={handleChange} className={`mask ${showMask && 'show'}`}></div>
        </div>
    )
}

export default FloatTop;

index.scss

.float-container {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    .content {
        position: relative;
        height: 0;
        z-index: 3;
        .slot-content {
            position: absolute;
            width: 100%;
            box-sizing: border-box;
            bottom: 0;
            background-color: white;
            border-radius: 0 0 10px 10px;
            overflow: hidden;
            transition: transform 0.2s ease-in-out;
            z-index: 9;
            padding: 20px;
            transform: translateY(0%);
            &.show {
                transform: translateY(100%);
            }
        }
    }
    .mask {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100vh;
        top: 0px;
        transition: all 0.2s linear;
        background-color: rgba(0, 0, 0, 0);
        display: none;
        &.show {
            background-color: rgba(0, 0, 0, 0.5);
            pointer-events: inherit;
            display: block;
        }
       
    }
}

然后就是引用和使用了

import { useState } from "react"
import "./App.scss"
import FloatTop from './components/FloatTop';
function App() {
  const [status, setStatus] = useState(false)
  return (
    <div className="App">
      <FloatTop showMask={status} handleChange={() => setStatus(false)}>
        <div className="test-sass">hello world</div>
      </FloatTop>
      <button onClick={() => setStatus(status => !status)}>显示</button>
    </div>
  );
}

export default App;

这个 也可以在小程序中使用 原理差不多

关注我 持续更新前端知识