react floating ball effect display

1.Demand

When developing a project, when the user logs in, a floating ball (which can be dragged freely) needs to be displayed on the homepage. After clicking the floating ball, the target page will be entered, as shown in the figure:

 

2. Realize

Write the floating ball function that needs to be implemented above as a component, and the page can directly call the component. This component needs to use the react-vantFloatingBall floating ball component. The code is as follows:

The home page introduces the floating ball component code:

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

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

export default Index;

Suspension ball components:

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;

ok, the floating ball function is implemented. You can add the pictures or copy you need in Flex.