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>
  <su-index-list :index-list="indexList">
    <template v-for="(item, index) in itemArr">
      <!-- #ifdef APP-NVUE -->
      <su-index-anchor :text="indexList[index]"></su-index-anchor>
      <!-- #endif -->
      <su-index-item>
        <!-- #ifndef APP-NVUE -->
        <su-index-anchor :text="indexList[index]"></su-index-anchor>
        <!-- #endif -->
        <view class="list-cell" v-for="(cell, index) in item">{{cell}}</view>
      </su-index-item>
    </template>
  </su-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>

<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设置为导航栏的高度

示例源码

点击可以查看 右侧演示页面的源码

API

IndexBar Props

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

IndexAnchor Slots

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