IndexBar 索引栏

引入

  1. import{IndexBar,IndexAnchor}from'vant';
  2. Vue.use(IndexBar).use(IndexAnchor);

代码演示

基础用法

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

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

自定义索引列表

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

  1. <van-index-bar :index-list="indexList">
  2. <van-index-anchorindex="1">标题1</van-index-anchor>
  3. <van-celltitle="文本"/>
  4. <van-celltitle="文本"/>
  5. <van-celltitle="文本"/>
  6. <van-index-anchorindex="2">标题2</van-index-anchor>
  7. <van-celltitle="文本"/>
  8. <van-celltitle="文本"/>
  9. <van-celltitle="文本"/>
  10. ...
  11. </van-index-bar>
  1. exportdefault{
  2. data(){
  3. return{
  4. indexList:[1,2,3,4,5,6,7,8,9,10]
  5. }
  6. }
  7. }

API

IndexBar Props

参数说明类型默认值版本
index-list索引字符列表ArrayA-Z-
z-indexz-index 层级Number1-
sticky是否开启锚点自动吸顶Booleantrue-
highlight-color索引字符高亮颜色String#07c160-

IndexAnchor Props

参数说明类型默认值版本
index索引字符String | Number--

IndexBar Events

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

IndexAnchor Slots

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

IndexBar 索引栏 - 图1