All files / src/affix/_example AffixExample.jsx

86.67% Statements 13/15
100% Branches 0/0
85.71% Functions 6/7
85.71% Lines 12/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78            1x       1x 1x 1x 1x 1x       1x 1x     1x                       1x                 1x                                             1x                      
import React, { useEffect, useRef } from "react";
import { Layout } from "@tencent/tea-component/lib/layout";
import { Card } from "@tencent/tea-component/lib/card";
import { Affix } from "@tencent/tea-component/lib/affix";
import { Button } from "@tencent/tea-component/lib/button";
 
const { Body, Content } = Layout;
 
function LayoutContentExample() {
  // 处理外层滚动
  const topAffixRef = useRef(null);
  const bottomAffixRef = useRef(null);
  useEffect(() => {
    const body = document.querySelector(".tea-web-body");
    const handleScroll = () => {
      topAffixRef.current.update();
      bottomAffixRef.current.update();
    };
    body.addEventListener("scroll", handleScroll);
    return () => body.removeEventListener("scroll", handleScroll);
  }, []);
 
  return (
    <Layout>
      <Body>
        <Content className="affix-target">
          <Content.Header title="内容标题" />
          <Content.Body>
            {/* 内容区域一般使用 Card 组件显示内容 */}
            <Card style={{ height: 1200 }}>
              <Card.Body>
                <Affix
                  ref={topAffixRef}
                  offsetTop={20}
                  target={() => document.querySelector(".affix-target")}
                >
                  <Button>钉在顶部</Button>
                </Affix>
              </Card.Body>
            </Card>
            <Affix
              ref={bottomAffixRef}
              offsetBottom={0}
              target={() => document.querySelector(".affix-target")}
            >
              <Card>
                <Card.Body>
                  <Button type="primary">钉在底部</Button>
                </Card.Body>
              </Card>
            </Affix>
          </Content.Body>
          <Content.Footer>
            <div className="layout-footer-demo">
              (可选项)自定义页脚
              <br />
              京公网安备 11010802017518 粤B2-20090059-1
            </div>
          </Content.Footer>
        </Content>
      </Body>
    </Layout>
  );
}
 
export default function Demo() {
  return (
    <section
      style={{
        height: 360,
        border: "1px solid #ddd",
      }}
    >
      <LayoutContentExample />
    </section>
  );
}