IndexList 索引列表 | uView - 多平台快速开发的UI框架

# IndexList 索引列表

通过折叠面板收纳内容区域

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

# 基本使用

外层包裹一个index-list组件，内部锚点通过index-anchor组件传入，其余内容可以自定义

可以通过index-list参数自定义索引字符列表
需要监听页面的onPageScroll事件，将当前滚动条高度传入index-list组件

<template>
	<u-index-list :scrollTop="scrollTop">
		<view v-for="(item, index) in indexList" :key="index">
			<u-index-anchor :index="item" />
			<view class="list-cell">
				列表1
			</view>
			<view class="list-cell">
				列表2
			</view>
			<view class="list-cell">
				列表3
			</view>
		</view>
	</u-index-list>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
					"V", "W", "X", "Y", "Z"
				]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>

# 自定义锚点样式

index-anchor锚点组件默认显示index参数的值，可以通过设置use-slot为true，传入自定义内容，同时设定自己的样式

<template>
	<u-index-list :scrollTop="scrollTop">
		<view v-for="(item, index) in indexList" :key="index">
			<u-index-anchor :use-slot="true">
				<text class="anchor-text">{{item}}</text>
			</u-index-anchor>
			<view class="list-cell">
				列表1
			</view>
			<view class="list-cell">
				列表2
			</view>
			<view class="list-cell">
				列表3
			</view>
		</view>
	</u-index-list>
</template>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
	
	.anchor-text {
		color: red;
	}
</style>

# 自定义导航栏

默认情况下，组件的锚点是吸附在导航栏下方的，如果您修改了导航栏，比如取消导航栏、或者自定义了导航栏，就需要指定吸顶的高度，也就是offset-top 的值，注意这个值的单位为rpx：

如果取消导航栏，需要将offset-top为0
如果自定义了导航栏，需要offset-top设置为导航栏的高度

# API

# IndexBar Props

参数	说明	类型	默认值	可选值
scroll-top	当前滚动高度，自定义组件无法获得滚动条事件，所以依赖接入方传入	Number \| String	-	-
index-list	索引字符列表，数组	Array[string \| number]	A-Z	-
z-index	锚点吸顶时的层级	Number \| String	965	-
sticky	是否开启锚点自动吸顶	Boolean	true	false
offset-top	锚点自动吸顶时与顶部的距离，单位rpx，见上方"自定义导航栏"说明	Number \| String	0	-
active-color	锚点和右边索引字符高亮颜色	String	#2979ff	-

# IndexAnchor Props

参数	说明	类型	默认值	可选值
use-slot	是否使用自定义内容的插槽	Boolean	false	true
index	索引字符，如果定义了`use-slot`，此参数自动失效	String \| Number	-	-
custom-style	自定义样式，对象形式，如"{color: 'red'}"	Object	-	-

# IndexBar Events

事件名	说明	回调参数	版本
select	选中右边索引字符时触发	index: 索引字符	-

# IndexAnchor Slots

名称	说明
default	锚点位置显示内容，默认为索引字符

← Subsection 分段器 Steps 步骤条 →