IndexBar 索引栏

介绍

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

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-index-bar": "@vant/weapp/index-bar/index",
  3. "van-index-anchor": "@vant/weapp/index-anchor/index"
  4. }

Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手

代码演示

基础用法

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

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

自定义索引列表

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

  1. <van-index-bar index-list="{{ indexList }}">
  2. <view>
  3. <van-index-anchor index="1">标题1</van-index-anchor>
  4. <van-cell title="文本" />
  5. <van-cell title="文本" />
  6. <van-cell title="文本" />
  7. </view>
  8. <view>
  9. <van-index-anchor index="2">标题2</van-index-anchor>
  10. <van-cell title="文本" />
  11. <van-cell title="文本" />
  12. <van-cell title="文本" />
  13. </view>
  14. ...
  15. </van-index-bar>
  1. Page({
  2. data: {
  3. indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  4. },
  5. });

API

IndexBar Props

参数说明类型默认值版本
index-list索引字符列表string[] | number[]A-Z-
z-indexz-index 层级number1-
sticky是否开启锚点自动吸顶booleantrue-
sticky-offset-top锚点自动吸顶时与顶部的距离number0-
highlight-color索引字符高亮颜色string#07c160-

IndexAnchor Props

参数说明类型默认值版本
use-slot是否使用自定义内容的插槽booleanfalse-
index索引字符string | number--

IndexBar Events

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

IndexAnchor Slots

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

IndexBar 索引栏 - 图1