vant/src/index-bar

IndexBar

Install

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

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

Usage

Basic Usage

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

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

  ...
</van-index-bar>

Custom Index List

<van-index-bar :index-list="indexList">
  <van-index-anchor index="1">Title 1</van-index-anchor>
  <van-cell title="Text" />
  <van-cell title="Text" />
  <van-cell title="Text" />

  <van-index-anchor index="2">Title 2</van-index-anchor>
  <van-cell title="Text" />
  <van-cell title="Text" />
  <van-cell title="Text" />

  ...
</van-index-bar>

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

API

IndexBar Props

Attribute	Description	Type	Default
index-list	Index List	string[] | number[]	A-Z
z-index	z-index	number | string	1
sticky	Whether to enable anchor sticky top	boolean	true
sticky-offset-top	Anchor offset top when sticky	number	0
highlight-color	Index character highlight color	string	#ee0a24

IndexAnchor Props

Attribute	Description	Type	Default
index	Index	number | string	-

IndexBar Events

Event	Description	Arguments
select	Emitted when an index is selected	index: number | string
change v2.10.10	Emitted when active index changed	index: number | string

IndexAnchor Slots

Name	Description
default	Anchor content, show index by default

IndexBar Methods

Use ref to get IndexBar instance and call instance methods.

Name	Description	Attribute	Return value
scrollTo v2.12.2	scroll to target element	index: number | string	-

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@index-bar-sidebar-z-index	2	-
@index-bar-index-font-size	@font-size-xs	-
@index-bar-index-line-height	@line-height-xs	-
@index-bar-index-active-color	@red	-
@index-anchor-z-index	1	-
@index-anchor-padding	0 @padding-md	-
@index-anchor-text-color	@text-color	-
@index-anchor-font-weight	@font-weight-bold	-
@index-anchor-font-size	@font-size-md	-
@index-anchor-line-height	32px	-
@index-anchor-background-color	transparent	-
@index-anchor-sticky-text-color	@red	-
@index-anchor-sticky-background-color	@white	-