IndexBar 索引栏

介绍

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

引入

import { createApp } from 'vue';
import { IndexAnchor, IndexBar } from '@szhn/dh-design-mobile';

const app = createApp();
app.use(IndexAnchor);
app.use(IndexBar);

代码演示

基础用法

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

<van-index-bar>
  <template v-for="char in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'" :key="char">
    <van-index-anchor :index="char" />
    <van-cell :title="'文本 ' + char" />
    <van-cell :title="'文本 ' + char" />
    <van-cell :title="'文本 ' + char" />
  </template>
</van-index-bar>

API

IndexBar Props

参数	说明	类型	默认值
index-list	索引字符列表	string[] | number[]	A-Z
z-index	z-index 层级	number | string	1
sticky	是否开启锚点自动吸顶	boolean	true
sticky-offset-top	锚点自动吸顶时与顶部的距离	number	0
highlight-color	索引字符高亮颜色	string	#1989fa
teleport	索引栏的传送目标节点	string | Element	-

IndexAnchor Props

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