首先，确保你已经引入了 Vant 4 和 Vue.js。你可以通过在 HTML 文件中引入相关的 CSS 和 JavaScript 文件，或者通过 npm 安装并在 Vue 组件中引入。
然后，在你的 Vue 组件中，可以使用以下代码来创建一个基本的 Vant IndexBar：
<template>
<div>
<!-- IndexBar 组件 -->
<van-index-bar @change="handleIndexChange">
<!-- IndexBar 索引项 -->
<van-index-anchor v-for="(item, index) in indexList" :key="index" :index="item">
{{ item }}
</van-index-anchor>
</van-index-bar>
<!-- List 组件 -->
<van-list>
<!-- 根据索引项显示相应的内容 -->
<van-list-item v-for="item in dataList" :key="item.id">
{{ item.name }}
</van-list-item>
</van-list>
</div>
</template>
<script>
export default {
data() {
return {
// 索引栏的索引项列表
indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
// 列表数据
dataList: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' },
// 其他数据...
],
};
},
methods: {
// 处理索引栏切换事件
handleIndexChange(index) {
// 根据索引项滚动到相应位置
const targetElement = this.$refs[`index${index}`];
if (targetElement) {
targetElement.scrollIntoView();
}
},
},
};
</script>
在上述代码中，<van-index-bar> 表示索引栏容器，而 <van-index-anchor> 表示索引栏的每个索引项。通过遍历数据数组 indexList 和 dataList，我们分别生成索引栏和列表。
通过 @change 事件监听索引栏切换，调用 handleIndexChange 方法实现根据索引项滚动到相应位置的功能。
转载请注明出处：http://www.zyzy.cn/article/detail/5848/Vant