索引列表组件用于实现类似手机通讯录的功能，支持快速定位和滚动到指定的索引位置。

基础使用

城市列表示例

<template>
	<view class="container">
		<view class="title">城市列表</view>
		<un-index-list :sticky="true">
			<un-index-section v-for="(item, index) in itemArr" :key="index" :index="item.index">
				<un-index-item v-for="(city, cityIndex) in item.data" :key="cityIndex" :type="item.index">
					<text class="item">{{ city }}</text>
				</un-index-item>
			</un-index-section>
		</un-index-list>
	</view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

type IndexItem = {
    index: string
    data: string[]
}

// 城市数据
const itemArr = ref<IndexItem[]>([
  {
    index: 'A',
    data: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门']
  },
  {
    index: 'B',
    data: ['北京', '白银', '保定', '宝鸡', '保山', '包头', '巴中', '北海', '蚌埠', '本溪', '毕节', '滨州', '百色', '亳州']
  }
  // 更多数据...
])
</script>

<style lang="scss" scoped>
.container {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;

	.title {
		font-size: 18px;
		font-weight: bold;
		padding: 10px 15px;
		background-color: #f5f5f5;
		border-bottom: 1px solid #e4e7ed;
	}
}

.item {
	font-size: 14px;
	margin: 10px;
	color: #303133;
}
</style>

API

IndexList Props

参数	说明	类型	默认值
inactiveColor	右边锚点状态非激活时的颜色	String	#606266
activeColor	右边锚点状态激活时的颜色	String	#5677fc
indicatorBgColor	索引指示器背景颜色	String	null
showIndicator	是否显示索引指示器	Boolean	true
sticky	是否开启锚点自动吸顶	Boolean	true

IndexList Events

事件名	说明	回调参数
change	选择索引项时触发	index: 索引字符

IndexList 方法

方法名	说明	参数
toAnchor	滚动到指定索引位置	index: number

IndexSection Props

参数	说明	类型	默认值
index	索引字符	String	''
size	索引文字大小	String | Number	null
bgColor	索引背景颜色	String	null

IndexSection Slots

名称	说明
anchor	自定义索引标题内容
default	自定义索引段落内容

IndexItem Props

参数	说明	类型	默认值
type	索引类型，与 IndexSection 的 index 属性对应	String | Number	0

IndexItem Slots

名称	说明
default	自定义列表项内容