反応フローティングボールエフェクト表示

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 で必要な写真やコピーを追加できます。