react悬浮球效果展示

1.需求

在开发项目时，当用户登录后，需要在主页显示一个悬浮球（可以自由拖动），点击悬浮球后，进入目标页面，如图所示：

 

2.实现

把上面需要实现的悬浮球功能写成一个组件，页面直接调用该组件即可，该组件需要使用到react-vantFloatingBall 悬浮球组件，代码如下：

主页引入悬浮球组件代码：

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

const Index = () => {
 const uerInfo = getUserInfo();  // 获取用户信息
 return (
        

            #判断用户是否登录，如果登录了，则引入悬浮球组件 
            {userInfo ? () : ""}
        
    ）
}

export default Index;

悬浮球组件：

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

const FloatBall = () => {

  return (
      
          
              
                  
              
          
      
  );
};

export default FloatBall;

ok，悬浮球功能实现， 可以在Flex中添加自己需求的图片或者文案