Vant组件库-IndexBar 索引栏

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

引入

xxxxxxxxxx
import { createApp } from 'vue';
import { IndexBar, IndexAnchor } from 'vant';

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

基础用法

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

xxxxxxxxxx
<van-index-bar>
  <van-index-anchor index="A" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  <van-index-anchor index="B" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  ...
</van-index-bar>

列表渲染

xxxxxxxxxx
<template>
  <van-index-bar>
    <template v-for="(item,index) in IndexBar.allData" :key="index">
      <van-index-anchor :index="item.name" />
      <van-cell v-for="(text,index) in item.titles" :key="index" :title="text" />
    </template>
  </van-index-bar>
</template>
<script setup>
import { reactive } from "vue"
const IndexBar = reactive({
  allData:[
    {
      name:"A",
      titles:["文本","文本","文本"]
    },
    {
      name:"B",
      titles:["文本","文本","文本"]
    },
    {
      name:"C",
      titles:["文本","文本","文本"]
    },
    {
      name:"D",
      titles:["文本","文本","文本"]
    },
    {
      name:"E",
      titles:["文本","文本","文本"]
    },
    {
      name:"F",
      titles:["文本","文本","文本"]
    },
    {
      name:"G",
      titles:["文本","文本","文本"]
    },
    {
      name:"H",
      titles:["文本","文本","文本"]
    }
  ]
})
</script>