Vant IndexBar index bar

May 07, 2021 Vant

Introduced

import Vue from 'vue';
import { IndexBar, IndexAnchor } from 'vant';

Vue.use(IndexBar);
Vue.use(IndexAnchor);

Code demo

Basic usage

When you click on the index bar, you automatically jump to the corresponding IndexAnchor anchor position

<van-index-bar>
  <van-index-anchor index="A" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  <van-index-anchor index="B" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  ...
</van-index-bar>

Custom index list

You can customize the list of indexed characters displayed with the index-list property.

<van-index-bar :index-list="indexList">
  <van-index-anchor index="1">标题1</van-index-anchor>
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  <van-index-anchor index="2">标题2</van-index-anchor>
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  ...
</van-index-bar>

export default {
  data() {
    return {
      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  }
}

Api

IndexBar Props

Parameters	Description	Type	The default
index-list	The list of index characters	string[] \| number[]	`A-Z`
z-index	z-index level	number \| string	`1`
sticky	Whether to turn on the anchor automatic ceiling	boolean	`true`
sticky-offset-top `v2.0.7`	The distance from the top when the anchor automatically tops	number	`0`
highlight-color	Index characters highlight colors	string	`#07c160`

IndexAnchor Props

Parameters	Description	Type	The default
index	Index character	number \| string	-

IndexBar Events

The name of the event	Description	Callback parameters
select	Triggered when characters are selected	index: Index character

IndexAnchor Slots

Name	Description
default	The anchor position displays content, which defaults to index characters