# AnchorList 锚点列表

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/anchor-list/freepass)
- 平台：移动端
- 维护者：王斌
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s51s
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[AnchorList]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from 'react';
import { AnchorContainer, Switch, Button, Icon, AnchorList } from '@weapp/ui';
import "./index.less";

const { Link } = AnchorList

const anchorListDemoPrefix = 'ui-anchor-list-demo'
export default class BasicDemo extends React.Component<any, any> {
  state = {
    needSearch: true,
    show: true,
    demoData1: [
      { id: 'demo_link_one_1', targetId: 'demo_link_one_1', title: 'demo_link_one_1', height: 300, href: '#demo_link_one_1' },
      { id: 'demo_link_one_2', targetId: 'demo_link_one_2', title: 'demo_link_one_2', height: 100, href: '#demo_link_one_2' },
      { id: 'demo_link_one_3', targetId: 'demo_link_one_3', title: 'demo_link_one_3', height: 100, href: '#demo_link_one_3' },
      { id: 'demo_link_one_4', targetId: 'demo_link_one_4', title: 'demo_link_one_4', height: 100, href: '#demo_link_one_4' },
      { id: 'demo_link_one_5', targetId: 'demo_link_one_5', title: 'demo_link_one_5', height: 200, href: '#demo_link_one_5' },
      { id: 'demo_link_one_6', targetId: 'demo_link_one_6', title: 'demo_link_one_6', height: 300, href: '#demo_link_one_6' },
    ],
    demoData2: [
      { id: 'demo_link_two_1', targetId: 'demo_link_two_1', title: 'demo_two_1', href: '#demo_link_two_1' },
      { id: 'demo_link_two_2', targetId: 'demo_link_two_2', title: 'demo_two_2', href: '#demo_link_two_2' },
      { id: 'demo_link_two_3', targetId: 'demo_link_two_3', title: 'demo_two_3', href: '#demo_link_two_3' },
      { id: 'demo_link_two_4', targetId: 'demo_link_two_4', title: 'demo_two_4', href: '#demo_link_two_4' },
      { id: 'demo_link_two_5', targetId: 'demo_link_two_5', title: 'demo_two_5', href: '#demo_link_two_5' }
    ],
    demoData3: [
      { id: 'demo_link_one_1', targetId: 'demo_link_one_1', title: '得测测额都闻到味得测测额都闻到味', height: 300, href: '#demo_link_one_1' },
      { id: 'demo_link_one_2', targetId: 'demo_link_one_2', title: '得测测额都闻到味', height: 100, href: '#demo_link_one_2' },
      { id: 'demo_link_one_3', targetId: 'demo_link_one_3', title: '得测', height: 100, href: '#demo_link_one_3' },
      { id: 'demo_link_one_4', targetId: 'demo_link_one_4', title: '得测测额都闻', height: 100, href: '#demo_link_one_4' },
      { id: 'demo_link_one_5', targetId: 'demo_link_one_5', title: '得测测额都闻到味得测测', height: 200, href: '#demo_link_one_5' },
      { id: 'demo_link_one_6', targetId: 'demo_link_one_6', title: 'demo_link_one_6', height: 300, href: '#demo_link_one_6' },
    ],
    layout: 'horizontal',
    showCollapseBtn: false,
  }
  getContainer = () => {
    const { show } = this.state
    const container = document.querySelector(`#anchorList_demo${show ? 1 : 2}`) || window
    return container as AnchorContainer
  }

  onClick = (e: React.MouseEvent<HTMLElement>, link: { title: React.ReactNode; href: string }) => {
    // console.log('onClick', e, link)
  }

  onChange = (currentActiveLink: string) => {
    // console.log('onChange', currentActiveLink)
  }

  handleChange = (v: boolean) => {
    this.setState({ needSearch: v })
  }

  change = () => {
    const { show } = this.state
    this.setState({ show: !show })
  }

  handleChangeLayout = (v: boolean) => {
    this.setState({ layout: v ? 'horizontal' : 'vertical' })
  }

  handleChangeCollapseBtn = (v: boolean) => {
    this.setState({ showCollapseBtn: v })
  }

  render() {
    const { demoData1, demoData2, show, demoData3, layout, showCollapseBtn } = this.state
    return (
      <div className={anchorListDemoPrefix}>
        <span>横向显示</span><Switch value={this.state.layout === 'horizontal'} onChange={this.handleChangeLayout} />
        <span>收缩按钮</span><Switch value={this.state.showCollapseBtn} onChange={this.handleChangeCollapseBtn} />
        {/*<Button onClick={this.change}>click</Button>
        <span style={{ margin: '15px 10px', display: 'inline-block', alignItems: 'center' }}>
          <Switch value={this.state.needSearch} onChange={this.handleChange} />&nbsp;&nbsp;&nbsp;是否开启搜索
        </span>*/}
        <AnchorList
         
          className={`${anchorListDemoPrefix}-content`}
          getContainer={this.getContainer}
          onClick={this.onClick}
          onChange={this.onChange}
          draggable={true}
          draggableParent={'#anchorList_demo1'}
          needSearch={this.state.needSearch}
          //prefixCls={mAnchorListPrefix}
          layout={layout as any}
          //extraScrollTop={10}
          //style={{bottom: '0', right: '100px'}}
          showCollapseBtn={showCollapseBtn}
          //defaultCollapsed
          data={show ? demoData1 : demoData2}
          isMobile
        >
          {
            show ?
              demoData1.map((item) => <Link showIcon layout='column' key={item.id} href={`#${item.id}`} title={item.title} />)
              :
              demoData2.map((item) => <Link key={item.id} href={`#${item.id}`} title={item.title} />)
          }
        </AnchorList>
        {
          show ? (<div id='anchorList_demo1' className={`${anchorListDemoPrefix}-warp`}>
            {
              demoData1.map(item => <div id={item.id} key={item.id} className={`${anchorListDemoPrefix}-link`} style={{ height: item.height }}>
                <h2>{item.title}</h2>
                <div>{item.title}</div>
              </div>
              )
            }
          </div>) :
            (<div id='anchorList_demo2' className={`${anchorListDemoPrefix}-warp`}>
              {
                demoData2.map((item: any) => <div id={item.id} key={item.id} className={`${anchorListDemoPrefix}-link`}>
                  <h2>{item.title}</h2>
                  <div>{item.title}</div>
                </div>
                )
              }
            </div>)
        }
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| getContainer | 指定滚动的容器 | () => AnchorContainer |  |  |
| style | 复写样式 | React.CSSProperties |  |  |
| className | 复写类名 | string |  |  |
| onClick | 点击锚点回调事件 | (e: React.MouseEvent,link: { title: React.ReactNode; href: string }) => void |  |  |
| onChange | 切换锚点回调事件 | (currentActiveLink: string) => void |  |  |
| draggable | 是否开启拖拽 | boolean |  | true |
| draggableParent | 拖拽边距父级容器 querySelector 选择器(父节点请指定 position 定位) | string |  |  |
| needSearch | 是否开启搜索 | boolean |  | true |
| defaultCollapsed | 是否默认展开锚点图标 | boolean |  | false |
| highlight | 是否选中锚点区域高亮(默认开启) | boolean |  | true |
| useExtraSelector | 使用多层级锚点定位模式（href可以传完整css选择器，例如.ebdpage-page.active #widget_1174644285283393537） | boolean |  | false |
| layout | 锚点方向 | 'horizontal' \| 'vertical' |  | 'horizontal' |
| showCollapseBtn | 是否显示收缩按钮 | boolean |  | true |
### Link 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| href | 锚点链接(链接不得包含空格) | string |  |  |
| title | 锚点文字内容 | React.ReactNode |  |  |
| name | 锚点文字标题（一般用于搜索） | string |  |  |
| children | 是否显示箭头图标 | boolean |  |  |
| className | 复写类名 | string |  |  |
| onBeforeScrollTo | 滚动前触发 | (scrollTo: () => void, link: { title: React.ReactNode; href: string, alwaysInactive?: boolean }) => void; |  |  |
