IndexBar 索引栏

引入

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

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

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

代码演示

基础用法

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

  1. <van-index-bar scroll-top="{{ scrollTop }}">
  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>
  1. Page({
  2. onPageScroll(event) {
  3. this.setData({
  4. scrollTop: event.scrollTop
  5. });
  6. }
  7. });

自定义索引列表

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

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

API

IndexBar Props

参数说明类型默认值版本
scroll-top当前滚动高度(自定义组件内部感知不到页面滚动,所以依赖接入方传入)Number0-
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

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

IndexBar 索引栏 - 图1