@pluve/scroll-anchor
TypeScript icon, indicating that this package has built-in type declarations

1.1.8 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @pluve/scroll-anchor

Weekly Downloads

1

Version

1.1.8

License

ISC

Unpacked Size

48.8 kB

Total Files

39

Last publish

Collaborators

  • fuqiting
  • zhaoyajie
  • annan1220
  • pengfeng365
  • plutolove
  • vdfor
  • ddg-dany
  • yangwend
  • yaqin8023
  • damonchen
  • lee2545
  • abel0222
  • stevenluo
  • xiongyan
  • deng_cheng