react实现app底部弹出菜单效果-html代码-BFW代码库

代码语言：html

代码描述：react实现app底部弹出菜单效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap");
body {
  margin: 0;
  overflow: hidden;
}

.App {
  align-items: center;
  background-color: #d8deeb;
  display: flex;
  font-family: "Open Sans";
  font-weight: 800;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.phone {
  align-items: center;
  background-color: #4947b1;
  border-radius: 30px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
    0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035),
    0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05),
    0 100px 80px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  height: 500px;
  overflow: hidden;
  position: relative;
  width: 260px;
}

.background {
  position: absolute;
}

.sheet {
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  cursor: grab;
  height: 120%;
  position: absolute;
  width: 100%;
  will-change: transform;
}

.top-sheet {
  background-color: #eff0f2;
}

.top-sheet-title {
  color: #333;
  font-family: "Open Sans";
  font-size: 20px;
  margin: 32px 0 0 20px;
  user-select: none;
  -webkit-user-select: none;
}

.top-sheet-card {
  border-radius: 16px;
  box-shadow: 0 1.1px 3.6px rgba(0, 0, 0, 0.044),
    0 3px 10px rgba(0, 0, 0, 0.048), 0 7.2px 24.1px rgba(0, 0, 0, 0.047),
    0 24px 80px rgba(0, 0, 0, 0.06);
  margin-left: 20px;
  margin-top: 24px;
}

.top-sheet-card:first-child {
  margin-top: 32px;
}

.bottom-sheet {
  background-color: #fff;
}

.bottom-sheet-title {
  color: #333;
  font-family: "Open Sans";
  font-size: 20px;
  margin: 32px 0 0 20px;
  user-select: none;
  -webkit-user-select: none;
}

.bottom-sheet-list {
  list-style: none;
  padding: 0;
  margin-top: 48px;
}

.bottom-sheet-item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 20px;
}

.bottom-sheet-transaction {
  background-color: #eff0f2;
  border-radius: 50%;
  height: 40px;
  margin-right: 12px;
  width: 40px;
}

.bottom-sheet-transaction-descr {
  font-weight: 400;
  font-size: 10px;
  margin-right: 12px;
  user-select: none;
  -webkit-user-select: none;
}

.bottom-sheet-transaction-amount {
  flex-shrink: 0;
  font-size: 14px;
  margin-left: auto;
  user-select: none;
  -webkit-user-select: none;
}

.avatar {
  border-radius: 50%;
  margin-top: 120px;
  transform-origin: 50% 0;
  width: 100px;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

.name {
  color: #fff;
  font-family: "Open Sans";
  font-size: 24px;
  top: 236px;
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
}

.balance {
  font-family: Open Sans;
  height: 0;
  left: 42px;
  position: relative;
  top: -62px;
  user-select: none;
  -webkit-user-select: none;
}

.balance-title {
  font-weight: 400;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
}

.balance-white {
  color: white;
}

.balance-amount {
  font-weight: 700;
  font-size: 20px;
  user-select: none;
  -webkit-user-select: none;
}
</style>

</head>
<body translate="no">
<div id="root"></div>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-spring-web.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-use-gesture.js"></script>
<script >
function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}const { useState, useEffect } = React;
const { useSpring, animated, config } = ReactSpring;
const { useDrag } = ReactUseGesture;

const TOP_THRESHOLD = 190;
const BOTTOM_THRESHOLD = 241;

function MasterCard() {
  return (
    React.createElement("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 220 120",
      height: "120",
      width: "220",
      className: "top-sheet-card" },

    React.createElement("defs", null,
    React.createElement("linearGradient", {
      id: "a",
      gradientTransform: "scale(447.26553) rotate(-20.218 .69 .902)",
      gradientUnits: "userSpaceOnUse",
      x2: "1" },

    React.createElement("stop", { offset: "0", stopColor: "#f96" }),
    React.createElement("stop", { offset: "1", stopColor: "#ff5e62" }))),


    React.createElement("rect", {
      ry: "0",
      y: ".659",
      x: "-.659",
      height: "119.223",
      width: "220.002",
      fill: "url(#a)" }),

    React.createElement("path", {
      d: "M27.76 16.435A11.76 11.214 0 0 0 16 27.65a11.76 11.214 0 0 0 11.76 11.213 11.76 11.214 0 0 0 6.203-1.688 13.85 12.98 0 0 1-4.63-9.686 13.85 12.98 0 0 1 4.408-9.496 11.76 11.214 0 0 0-5.98-1.56z",
      fill: "#fff" }),

    React.createElement("ellipse", { ry: "11.214", rx: "11.761", cy: "27.649", cx: "44.369", fill: "#fff" }),
    React.createElement("path", {
      d: "M187.104 68.855c-.616.06-.864-.848-1.47-1.568-.606-.72-2.027-1.988-2.108-2.794-.08-.806.38-.337.59-1.225.206-.89.31-3.234.048-4.118-.262-.883-.785-.292-.785-1.176 0-.884 1.56-2.443 2.156-3.235.595-.792.577-1.548 1.323-1.57.746-.02 1.037 1.02 1.666 1.765.63.747 2.088 1.86 2.058 2.745-.03.884-.91.56-1.225 1.42-.315.864-.248 2.74.048 3.63.296.888 1.21.593 1.176 1.616-.033 1.023-2.088 2.416-2.646 3.186-.56.77-.217 1.264-.834 1.323z",
      fill: "#fff" }),

    React.createElement("path", {
      d: "M184.752 68.218c.07.497.26.382-.588.784-.85.403-3.622.015-4.657-.196-1.035-.21-1.198-.254-1.568-.588-.372-.333-.46-.63-.59-1.176-.13-.547-.133-1.618 0-2.06.134-.44.078-.358.393-.587.315-.23 1.328-.087 1.568-.44.24-.355.244-.6-.097-.932-.34-.332-.997.21-1.91-.147-.573-1.19-.568-2.07-.1-3.48 1.106-.33 4.426-.237 5.735-.148.33 1.56.233 2.47.05 3.53-1.067.322-2.02.04-2.353.44-.334.402-.282.414 0 .736.28.322 1.23-.28 1.813.245.583.523.237 2.11.686 2.793.45.683 1.548.728 1.618 1.225zM182.107 58.106c.38 0 .485-.306.498-.654.013-.35-.158-1.577.21-2.172.365-.595 1.447-.66 1.7-1.072.252-.414.338-.436.078-.89-.226-.394-3.772-.063-4.92-.026-1.146.037-1.476.34-1.935.785-.46.444-.667.945-.706 1.596-.04.65-.08 1.11-.026 1.726.053.615-.037.755.523.89.412.098 3.756-.184 4.577-.184zM195.937 62.98c.77-.364.365-.128.572-.723.205-.596.27-2.31 0-2.86-.273-.548-.372-.414-.65-.495-.277-.08-.6.006-1.13-.007-.015-.36-.01-.267-.037-.73.546-.06 1.105-.062 1.396-.178.29-.115.254.054.495-.495.24-.55.387-2.22.114-2.897-.273-.678.046-.546-1.068-1.03s-4.718-.477-5.794-.305c-1.076.173-.615-.073-.687.267-.07.34.47.338.954.953.486.615 1.44 2.245 1.754 2.86.315.613.034.55.305.724.27.173.536.173 1.144.128.046.41.02.287 0 .66-.63-.032-1.378-.154-1.792.05-.414.204-.422.212-.61.763-.19.55-.21 1.97.038 2.516.247.547-.017.402.8.725.818.323 3.423.44 4.194.076zM191.71 64.11c-.38 0-.484.306-.497.654-.013.35.157 1.577-.21 2.172-.366.595-1.448.66-1.7 1.073-.252.412-.34.434-.08.888.227.395 3.773.064 4.92.026 1.147-.037 1.477-.34 1.936-.785.458-.445.666-.946.705-1.597.04-.65.08-1.11.026-1.726-.052-.615.038-.755-.522-.89-.413-.1-3.757.183-4.578.183z",
      fill: "#fff&.........完整代码请登录后点击上方下载按钮下载查看