t-indexed

Indexed 索引列表

组件介绍

索引导航组件，用于显示索引列表，支持配置索引数据列表，通过Canvas绘制实现高性能渲染。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <view class="indexed-demo">
    <t-indexed :list="indexedList" @select="handleSelect"></t-indexed>
  </view>
</template>

<script setup>
const indexedList = ref([
  { letter: 'A', name: 'A组' },
  { id: '1', name: '安徽' },
  { id: '2', name: '澳门' },
  { letter: 'B', name: 'B组' },
  { id: '3', name: '北京' },
  { id: '4', name: '保定' },
  { letter: 'C', name: 'C组' },
  { id: '5', name: '重庆' },
  { id: '6', name: '长沙' },
  { letter: 'D', name: 'D组' },
  { id: '7', name: '大连' },
  { id: '8', name: '东莞' },
]);

function handleSelect(data) {
  console.log('选中:', data);
}
</script>

<style scoped>
.indexed-demo {
  height: 100vh;
}
</style>

Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
list	Array	[]	数据源	-

Events

事件名	说明	回调参数
select	索引选中时触发	当前选中的信息
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

数据结构

字段名	类型	说明
id	String	列表项的唯一标识
name	String	列表项的显示名称
letter	String	索引字母，用于分组显示