索引 xIndexbar

预览

介绍

特别提醒：本组件在1.0.9重构不向下兼容，并且删除了子组件：x-indexbar-item，不再需要子组件。请使用对应的动态插槽来渲染数据。 App/Web/鸿蒙端内部为单个 list-view + sticky-section 原生吸顶：顶部 top 插槽随列表上推，下方按 A/B/C 分组，分类标题滑到当前组时原生吸顶（类似 iOS 通讯录 / 微信联系人）；小程序端为单个 scroll-view（using-sticky 吸顶），不用嵌套滚动。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径


@/uni_modules/tmx-ui/components/x-indexbar/x-indexbar.uvue

使用


<x-indexbar></x-indexbar>

Props 属性

名称	说明	类型	默认值
width	`宽`	`string`	`"auto"`
height	`高，%,rpx,px单位均可。`	`string`	`"100%"`
dotActiveColor	`侧边指示激活时的文字颜色` `空值是取全局主题值`	`string`	`""`
dotColor	`侧边指示未激活时的文字颜色`	`string`	`"#c0c0c0"`
dotBgColor	`侧边指示的背景颜色`	`string`	`"white"`
list	``	`UTSJSONObject[]`	`() : UTSJSONObject[] => [] as UTSJSONObject[]`
cellHeight	`项目的高` `只能是数字，或者带rpx,px单位`	`string`	`'50'`
titleHeight	`项目的标题高` `只能是数字，或者带rpx,px单位`	`string`	`'32'`
customSliderBar	``	`Array<string>`	`() : string[] => [] as string[]`

Events 事件

名称	参数	说明

Slots 插槽

名称	说明	数据
top	`顶部布局，可以自由布局。滚动时会随列表上推。`	-
header	`分组标题，滑到当前分类时吸顶`	title: string title: number index: string index: number
default	`动态插槽`	index: UTSJSONObject index: number index: number currentIndex: UTSJSONObject currentIndex: number currentIndex: number current: UTSJSONObject current: number current: number

Ref 方法

名称	参数	返回值	说明

示例文件路径

json


/pages/daohang/indexbar

示例源码

uvue

vue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
		
	<!-- #endif -->

	
	<view class="mx-16 flex-1">
		<x-indexbar :customSliderBar="['搜','火']" :list="list" height="100%" cellHeight="72">
			<template v-slot:top>
				<x-search color="transparent" input-bg-color="#ffffff"></x-search>
			</template>
			<template v-slot:default="{index,currentIndex,current}">
				<view class="flex flex-row flex-row-center-start" style="border-bottom: 1px solid rgba(100, 100, 100, 0.1);height:72px;">
					<image class="flex-shrink" :src="`https://picsum.photos/100/100?random=${index}`" style="width:50px;height:50px;border-radius: 50px;"></image>
					<text :style="{color:isDark?'#ffffff':'#000000'}" class="ml-20">{{(current as UTSJSONObject).getAny("name")}}</text>
				</view>
			</template>
		</x-indexbar>
	</view>
		
</template>

<script setup>
	// 示例参数数据,请vip用户到demo中下载查询数据样例.
	import {dataslist} from "./indexdata.uts"
	import { xConfig } from "@/uni_modules/tmx-ui";
	const isDark = computed(():boolean => xConfig.dark=='dark')
	const list = ref<UTSJSONObject[]>(JSON.parseArray(dataslist)! as UTSJSONObject[])
</script>

<style lang="scss">

</style>

索引 xIndexbar ​

介绍 ​

平台兼容 ​

文件路径 ​

使用 ​

Props 属性 ​

Events 事件 ​

Slots 插槽 ​

Ref 方法 ​

示例文件路径 ​

示例源码 ​