代码拉取完成，页面将自动刷新
$ npm install anchor-scroll-menu
import React from 'react';
import { AnchorMenu } from 'anchor-scroll-menu';
const commonStyle = { height: 300 };
const id = +new Date();
const menuList = [
{
name: 'antiquewhite',
key: `antiquewhite${id}`,
content: <div style={{ ...commonStyle, backgroundColor: 'antiquewhite' }} />,
},
{
name: 'skyblue',
key: `skyblue${id}`,
content: <div style={{ ...commonStyle, backgroundColor: 'skyblue' }} />,
},
{
name: 'pink',
key: `pink${id}`,
content: <div style={{ ...commonStyle, backgroundColor: 'pink' }} />,
},
{
name: 'orange',
key: `orange${id}`,
content: <div style={{ ...commonStyle, backgroundColor: 'orange' }} />,
},
{
name: 'lightcoral',
key: `lightcoral${id}`,
content: <div style={{ ...commonStyle, backgroundColor: 'lightcoral' }} />,
},
];
export default () => (
<div style={{ width: '100%', height: 600 }}>
<AnchorMenu menuList={menuList} />
</div>
);
| Name | Description | Type | Default |
|---|---|---|---|
| menuList | 菜单数据数组，key 请确保是唯一的，由字母数字组成，且必须以字母开头 | { name: string; content: ReactNode; key: string; }[] |
[] |
| menuStyle | menu 区域的 style | CSSProperties |
-- |
| placement | menu 区域的位置 | "top" | "right" | "bottom" | "left" | left |
| scrollDirection | 滚动方向 | "vertical" | "horizontal" | vertical |
| region | 手动滚动时，滚动内容跟父元素顶部距离的区间, 滚动内容一到达该区间, 对应菜单按钮高亮。如果滚动过快时，菜单没有高亮，不妨将区间增大。 | [number, number] |
[-20, 20] |
| easing | 缓动动画函数 | "linear" | "easeInQuad" | "easeOutQuad" | "easeInOutQuad" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | easeInOutCubic |
| duration | 用多少 ms 完成滚动动画，单位 ms | number |
300 |
| hideTitle | 隐藏内容块的 title | boolean |
false |
| activeKey | 当前激活的 menu 的 key | string |
-- |
| onMenuClick | 点击菜单的回调函数 | (key: string, index: number, activeKey: string) => void |
-- |
| onReach | 点击菜单滚动到达目的地后的回调函数 | (key: string, index: number) => void |
-- |
Jay-Ohhh
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Give a ⭐️ if this project helped you!
Copyright © 2022 Jay-Ohhh.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。