플로팅 볼 효과 디스플레이 반응

1.수요

프로젝트 개발 시, 사용자가 로그인할 때 홈페이지에 플로팅 볼이 표시되어야 합니다.(자유롭게 드래그 가능) 플로팅 볼을 클릭하면 그림과 같이 대상 페이지로 들어갑니다.

 

2. 깨닫다

위에서 구현해야 하는 플로팅볼 기능을 컴포넌트로 작성하면 페이지에서 해당 컴포넌트를 직접 호출할 수 있는데, 이 컴포넌트는 반드시 React-vantFloatingBall 플로팅볼 컴포넌트를 사용해야 하며 코드는 다음과 같습니다 .

홈 페이지에는 플로팅 볼 구성 요소 코드가 소개되어 있습니다.

import FloatBall from "../../components/FloatBall";

const Index = () => {
 const uerInfo = getUserInfo();  // 获取用户信息
 return (
        <div>
            #判断用户是否登录，如果登录了，则引入悬浮球组件 
            {userInfo ? (<HomeInviteWheelFloatBall />) : ""}
        </div>
    ）
}

export default Index;

서스펜션 볼 구성 요소:

import style from "./style.less";
import {Flex,  FloatingBall} from 'react-vant';

const FloatBall = () => {

  return (
      <FloatingBall
          offset={
   
   {
              right: 100,
              bottom: 150,
          }}
          draggable
          style={
   
   {
              '--rv-floating-box-size': '60px',
              '--rv-floating-ball-z-index': 200,
          }}
          adsorb={false}
      >
          <Flex align='center' justify='center'>
              <a href="/目标页面">
                  <img src={"..."} />
              </a>
          </Flex>
      </FloatingBall>
  );
};

export default FloatBall;

좋아, 플로팅 볼 기능이 구현되었습니다. Flex에서 필요한 사진이나 복사본을 추가할 수 있습니다.