引入组件

局部引入

// parent.vue
const FIndexList = defineAsyncComponent(() => import('@/components/formaui/f-index-list/f-index-list.vue'))

基础用法

items属性：分组数据源，每项需包含约定字段 letter、data

<f-index-list :items="items" @letter-click="onLetterClick">
  <template #header>
    <view>顶部内容（搜索栏等）</view>
  </template>
  <template #item="{ entity, index }">
    <f-cell v-for="(item, subi) in entity" :key="subi" @click="onItemClick(index, subi)">{{ item.name }}</f-cell>
  </template>
  <template #footer>
    <view>{{ total }} 位联系人</view>
  </template>
</f-index-list>

import { ref, computed } from 'vue'
import type { FIndexListItem } from '@/components/formaui/f-index-list/types'

const items = ref<FIndexListItem[]>([
  {
    letter: 'A',
    data: [
      { id: 1, name: '阿拉斯加', keyword: '阿拉斯加ABA' },
      { id: 2, name: '阿克苏', keyword: '阿克苏AKESU' }
    ]
  },
  {
    letter: 'B',
    data: [{ id: 3, name: '白城', keyword: '白城BAICHENG' }]
  }
])

const total = computed(() => items.value.reduce((sum, item) => sum + item.data.length, 0))

const onLetterClick = (detail: { index: number; letter: string }) => {
  console.log(detail.index, detail.letter)
}

const onItemClick = (groupIndex: number, subIndex: number) => {
  const item = items.value[groupIndex]?.data?.[subIndex]
  uni.showToast({ title: item?.name || '', icon: 'none' })
}

top / bottom / unit属性：扣除顶部、底部占用高度（默认 unit 为 px）

<f-index-list :items="items" :top="88" :bottom="0" unit="rpx" />

reinit属性：异步加载数据后递增，触发重新计算吸顶与索引位置

<f-index-list :items="items" :reinit="reinit" />

const reinit = ref(0)
// 异步拿到数据后
items.value = list
reinit.value += 1

sticky 标题样式：height、color、activeColor、fontSize、bgColor、activeBgColor、padding

<f-index-list
  :items="items"
  height="60rpx"
  color="#666"
  active-color="#16479D"
  font-size="26rpx"
  bg-color="#ededed"
  active-bg-color="#FFFFFF"
  padding="0 20rpx" />

右侧索引条：keyColor、activeKeyColor、activeKeyBgColor

<f-index-list :items="items" key-color="#666" active-key-color="#FFFFFF" active-key-bg-color="#16479D" />

插槽

名称	说明
header	列表顶部内容
item	分组内容；作用域参数 entity（当前组 data）、index
footer	列表底部内容

属性

名称	类型	说明	默认值
items	FIndexListItem[]	分组数据（letter / data 约定）	[]
top	number	顶部占用高度	0
bottom	number	底部占用高度	0
unit	string	top/bottom 单位，可传[rpx、px]	px
showTopLine	boolean	sticky 标题上边线	true
showBottomLine	boolean	sticky 标题下边线	true
height	string	sticky 标题高度	60rpx
color	string	sticky 标题默认文字色	#666
activeColor	string	sticky 标题吸顶文字色	主题色
fontSize	string	sticky 标题字号	26rpx
bgColor	string	sticky 标题默认背景色	#ededed
activeBgColor	string	sticky 标题吸顶背景色	#FFFFFF
padding	string	sticky 标题内边距	0 20rpx
keyColor	string	右侧索引条文字色	#666
activeKeyColor	string	右侧索引条选中文字色	#FFFFFF
activeKeyBgColor	string	右侧索引条选中背景色	主题色
reinit	number	重新初始化（异步场景递增）	0

items 单项格式：

{
  letter: 'A', // 索引 KEY，约定字段不可改
  data: [{ name: '...', keyword: '...' }] // data 内字段自定义
}

事件

事件名	说明	回调参数
letterClick	点击右侧索引	{ index: number, letter: string }

方法

方法名	说明	传入参数
-	-	-