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;
ok,悬浮球功能实现, 可以在Flex中添加自己需求的图片或者文案