Indexed (索引导航)

索引导航组件，用于显示索引列表，支持配置索引数据列表。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page title='索引导航(canvas绘制)' main-class='f' :scrollDisabled="true">
		<t-indexed main-class="f" type="e" :list="dataList" @select="select"></t-indexed>
		<t-card main-class='df dlb-0' title="索引导航"
			sub-title="长列表渲染非常考验开发技巧,采用list组件虽能自动回收,但首次加载会卡住非常影响体验,该插件采用canvas绘制,利用虚拟滚动原理,每次只会绘制屏幕可见的十几个数据,不会卡页面,但是样式会固定,如有更丰富界面UI需求需要付费定制"></t-card>
	</t-page>
</template>

<script>
	import { TuiApi } from '@/api'
	export default {
		data() {
			return {
				dataList: [] as UTSJSONObject[]
			};
		},
		created() {
			TuiApi('indexsortdata',{},true).then(res => {
				this.dataList = res['data'] as UTSJSONObject[]
			})
		},
		methods: {
			select(e : UTSJSONObject) {
				if (e.getString('letter') != null) {
					// 此逻辑点击了标题
					uni.showToast({
						title: e.getString('letter')!
					})
				} else {
					uni.showToast({
						title: e.getString('name')!
					})
				}
				console.log(e)
			}
		}
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
list	any	``	数据源

事件

名称	返回参数	说明
select	(e : UTSJSONObject)	索引选中时触发返回当前选中的信息