IndexBar 索引栏

介绍

用于列表的索引分类显示和快速定位。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

  1. import { createApp } from 'vue';
  2. import { IndexBar, IndexAnchor } from 'vant';
  3. const app = createApp();
  4. app.use(IndexBar);
  5. app.use(IndexAnchor);

代码演示

基础用法

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

  1. <van-index-bar>
  2. <van-index-anchor index="A" />
  3. <van-cell title="文本" />
  4. <van-cell title="文本" />
  5. <van-cell title="文本" />
  6. <van-index-anchor index="B" />
  7. <van-cell title="文本" />
  8. <van-cell title="文本" />
  9. <van-cell title="文本" />
  10. ...
  11. </van-index-bar>

自定义索引列表

可以通过 index-list 属性自定义展示的索引字符列表。

  1. <van-index-bar :index-list="indexList">
  2. <van-index-anchor index="1">标题1</van-index-anchor>
  3. <van-cell title="文本" />
  4. <van-cell title="文本" />
  5. <van-cell title="文本" />
  6. <van-index-anchor index="2">标题2</van-index-anchor>
  7. <van-cell title="文本" />
  8. <van-cell title="文本" />
  9. <van-cell title="文本" />
  10. ...
  11. </van-index-bar>
  1. export default {
  2. setup() {
  3. return {
  4. indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  5. };
  6. },
  7. };

API

IndexBar Props

参数说明类型默认值
index-list索引字符列表string[] | number[]A-Z
z-indexz-index 层级number | string1
sticky是否开启锚点自动吸顶booleantrue
sticky-offset-top锚点自动吸顶时与顶部的距离number0
highlight-color索引字符高亮颜色string#1989fa
teleport v3.0.19指定索引栏挂载的节点string | Element-

IndexAnchor Props

参数说明类型默认值
index索引字符number | string-

IndexBar Events

事件名说明回调参数
select点击索引栏的字符时触发index: number | string
change当前高亮的索引字符变化时触发index: number | string

IndexBar 方法

通过 ref 可以获取到 IndexBar 实例并调用实例方法,详见组件实例方法

方法名说明参数返回值
scrollTo滚动到指定锚点index: number | string-

类型定义

组件导出以下类型定义:

  1. import type { IndexBarProps, IndexAnchorProps, IndexBarInstance } from 'vant';

IndexBarInstance 是组件实例的类型,用法如下:

  1. import { ref } from 'vue';
  2. import type { IndexBarInstance } from 'vant';
  3. const indexBarRef = ref<IndexBarInstance>();
  4. indexBarRef.value?.scrollTo('B');

IndexAnchor Slots

名称说明
default锚点位置显示内容,默认为索引字符

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
—van-index-bar-sidebar-z-index2-
—van-index-bar-index-font-sizevar(—van-font-size-xs)-
—van-index-bar-index-line-heightvar(—van-line-height-xs)-
—van-index-bar-index-active-colorvar(—van-primary-color)-
—van-index-anchor-z-index1-
—van-index-anchor-padding0 var(—van-padding-md)-
—van-index-anchor-text-colorvar(—van-text-color)-
—van-index-anchor-font-weightvar(—van-font-bold)-
—van-index-anchor-font-sizevar(—van-font-size-md)-
—van-index-anchor-line-height32px-
—van-index-anchor-backgroundtransparent-
—van-index-anchor-sticky-text-colorvar(—van-primary-color)-
—van-index-anchor-sticky-backgroundvar(—van-background-2)-

IndexBar 索引栏 - 图1