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对应

示例

项目Demo