# IndexBar 索引栏

### 引入

在`index.config.js中引入组件

```json
"usingComponents": {
  "van-index-bar": "@vant/weapp/index-bar/index",
  "van-index-anchor": "@vant/weapp/index-anchor/index",
  "van-tab": "../../vant/tab/index",
   "van-tabs": "../../vant/tabs/index",
}
```



## 代码演示

### 基础用法

点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置

```html
    <van-tabs
          active={'basic'}
          color={'#dc1e32'}
          type={'line'}
          border={true}
          onChange={(e) => this.onChange(e)}
        >
          <van-tab title="基础用法" name={'basic'}>
            {
              this.state.activeTab === 0 ?
                <van-index-bar scrollTop={this.state.scrollTop} sticky={true} indexList={indexList}>
                  {
                    this.state.indexList.map((item, index) => {
                      return (
                        <view>
                          <van-index-anchor index={item} key={item}/>
                          <van-cell title="文本"/>
                          <van-cell title="文本"/>
                          <van-cell title="文本"/>
                        </view>
                      )
                    })
                  }
                </van-index-bar> : null
            }
          </van-tab>
        </van-tabs>
```

```javascript
class IndexBarComponent extends Component {
  constructor(props) {
    super(props)
  };


  state = {
    activeTab: 0,
    indexList,
    customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10],
    scrollTop: 0,
  };

  componentWillMount() {

  }

  onChange(event) {
    this.setState({
      activeTab: event.detail.name
    });
  }

  onPageScroll(event) {
    this.setState({
      scrollTop: event.scrollTop
    });
  }
}
```

## API
### 注:属性应用在组件上需要统一使用驼峰式命名，如custom-class应用为
```html
<van-button type="primary" customClass='myClass' size="large">大号按钮</van-button>
```
### IndexBar Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| index-list | 索引字符列表 | _string[] \| number[]_ | `A-Z` | - |
| z-index | z-index 层级 | _number_ | `1` | - |
| sticky | 是否开启锚点自动吸顶 | _boolean_ | `true` | - |
| sticky-offset-top | 锚点自动吸顶时与顶部的距离 | _number_ | `0` | - |
| highlight-color | 索引字符高亮颜色 | _string_ | `#07c160` | - |

### IndexAnchor Props

| 参数     | 说明                     | 类型               | 默认值  | 版本 |
| -------- | ------------------------ | ------------------ | ------- | ---- |
| use-slot | 是否使用自定义内容的插槽 | _boolean_          | `false` | -    |
| index    | 索引字符                 | _string \| number_ | -       | -    |

### IndexBar Events

| 事件名 | 说明           | 回调参数        |
| ------ | -------------- | --------------- |
| select | 选中字符时触发 | index: 索引字符 |

### IndexAnchor Slots

| 名称 | 说明                             |
| ---- | -------------------------------- |
| -    | 锚点位置显示内容，默认为索引字符 |