uview-plus

# IndexList 索引列表

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

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

外层包裹一个index-list组件，锚点通过index-anchor组件传入，自定义列表内容通过index-item嵌套使用

  • nvue需要将index-anchor写在index-item的外部
  • 非nvue需要将index-anchor嵌套在index-item的内部
  • 可以通过index-list参数自定义索引字符列表
  • 需要监听页面的onPageScroll事件，将当前滚动条高度传入index-list组件
<template>
	<up-index-list :index-list="indexList">
		<template v-for="(item, index) in itemArr">
			<!-- #ifdef APP-NVUE -->
			<up-index-anchor :text="indexList[index]"></up-index-anchor>
			<!-- #endif -->
			<up-index-item>
				<!-- #ifndef APP-NVUE -->
				<up-index-anchor :text="indexList[index]"></up-index-anchor>
				<!-- #endif -->
				<view class="list-cell" v-for="(cell, index) in item">
					{{cell}}
				</view>
			</up-index-item>
		</template>
	</up-index-list>
</template>

<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const indexList = ref(["A", "B", "C"]);  
const itemArr = ref([  
  ['列表A1', '列表A2', '列表A3'],  
  ['列表B1', '列表B2', '列表B3'],  
  ['列表C1', '列表C2', '列表C3']  
]);  
</script>

<script>
	export default {
		data() {
			return {
				indexList: ["A", "B", "C"],
				itemArr: [
					['列表A1','列表A2','列表A3'],
					['列表B1','列表B2','列表B3'],
					['列表C1','列表C2','列表C3']
				]
			}
		}
	}
</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>

# 自定义导航栏

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

  • 如果自定义了导航栏，需要custom-nav-height设置为导航栏的高度

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# IndexBar Props

参数 说明 类型 默认值 可选值
inactiveColor 右边锚点状态非激活时的颜色 String #606266 -
activeColor 右边锚点状态激活时的颜色 String #5677fc -
indexList 索引字符列表，数组 Array[string | number] A-Z -
sticky 是否开启锚点自动吸顶 Boolean true false
customNavHeight 自定义导航栏的高度，单位默认px String | Number 0 -

# IndexAnchor Props

参数 说明 类型 默认值 可选值
text 列表锚点文本内容 String | Number - -
color 列表锚点文字颜色 String #606266 -
size 列表锚点文字大小，单位默认px String | Number 14 -
bgColor 列表锚点背景颜色 String #dedede -
height 列表锚点高度，单位默认px String | Number 32 -

# IndexBar Events

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

# IndexItem Slots

名称 说明
default 自定义列表内容

← Steps 步骤条 →