Scroll Anchor
安装
npm install @pluve/scroll-anchor
yarn add @pluve/scroll-anchor组件介绍
H5平台的双向锚点组件，可以为页面滚动提供锚点定位，提供功能包括
- 双向锚点
- 自动吸顶
- 动态高度支持
- 内容嵌套
使用
const navKey = [
{ key: 'h1', name: 'test1' },
{ key: 'h2', name: 'test2' },
{ key: 'h3', name: 'test3' },
{ key: 'h4', name: 'test4' },
{ key: 'h5', name: 'test5' },
{ key: 'h6', name: 'test6' },
{ key: 'h7', name: 'test7' },
];
<ScrollAnchorWrapper>
<ScrollAnchor>
<!-- other view -->
<ScrollAnchorNavBar navData={navKey} fixedPosition={0} />
<ScrollAnchorItem scrollKey="h1">
<div>you content</div>
</ScrollAnchorItem>
<ScrollAnchorItem scrollKey="h2">
<div>you content</div>
</ScrollAnchorItem>
<ScrollAnchorItem scrollKey="h3">
<div>you content</div>
</ScrollAnchorItem>
<ScrollAnchorItem scrollKey="h4">
<div>you content</div>
</ScrollAnchorItem>
<ScrollAnchorItem scrollKey="h5">
<div>you content</div>
</ScrollAnchorItem>
<ScrollAnchorItem scrollKey="h6">
<div>you content</div>
</ScrollAnchorItem>
<ScrollAnchorItem scrollKey="h7">
<div>you content</div>
</ScrollAnchorItem>
</ScrollAnchor>
</ScrollAnchorWrapper>以上为组件的使用方式，组件内部使用Context维护数据，默认情况下，只使用单一数据源，即默认KEY使用，
在嵌套模式下，需要进行Key的指定，即同时存在多个 ScrollAnchor的情况下，需要指定anchorKey
<ScrollAnchor anchorKey='details'>
...
</ScrollAnchor>在ScrollAnchorItem中同样需要使用belongTo来指定归属关系
<ScrollAnchorItem scrollKey="h1" belongTo='details'>
...
</ScrollAnchorItem>在组件ScrollAnchorItem中，scrollKey用于指定锚点，需要和导航内的key对应