Fusions

Appearance

IndexList 索引列表 ​

iPhone

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

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

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

  • 通过 indexList 属性自定义索引字符列表
  • nvue需要将 index-anchor 组件写在 index-item 组件的外部
  • 非nvue需要将 index-anchor 组件嵌套在 index-item 组件内部
html
<template>
    <fu-index-list>
        <template v-for="(item, index) in list">
            <!-- #ifdef APP-NVUE -->
            <fu-index-anchor :text="indexList[index]"></fu-index-anchor>
            <!-- #endif -->
            <fu-index-item>
                <!-- #ifndef APP-NVUE -->
                <fu-index-anchor :text="indexList[index]"></fu-index-anchor>
                <!-- #endif -->
                <view class="list-cell" v-for="(cell, index) in item">
                    {{cell}}
                </view>
            </fu-index-item>
        </template>
    </fu-index-list>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const 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"];
    const list = [
        ['列表A1', '列表A2', '列表A3'],
        ['列表B1', '列表B2', '列表B3'],
        ['列表C1', '列表C2', '列表C3'],
        ['列表D1', '列表D2', '列表D3'],
        ['列表E1', '列表E2', '列表E3'],
        ['列表F1', '列表F2', '列表F3'],
        ['列表G1', '列表G2', '列表G3']
    ];
</script>

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

设置自定义导航栏 ​

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

  • 如果自定义导航栏，需要 customNavHeight 属性设置为导航栏的高度

API ​

IndexList Props ​

属性名说明类型默认值可选值
inactiveColor右边锚点非激活的颜色-String#686b6f-
activeColor右边锚点激活的颜色String#2979ff-
indexList索引字符列表ArrayA-Z-
sticky是否吸顶Booleantruefalse
customNavHeight自定义导航栏高度String｜Number0-

IndexList Events ​

事件名说明回调参数
select选中右边索引字符时触发() => void

IndexList Slot ​

名称说明
header自定义索引列表头部内容
footer自定义索引列表底部内容
default嵌套 index-item 组件

indexAnchor Props ​

属性名说明类型默认值可选值
text列表锚点文本内容String｜Number--
color列表锚点文字颜色String#5c5e62-
size列表锚点文字大小String｜Number14-
bgColor列表锚点背景颜色String#f6f6f6-
height列表锚点高度String｜Number32-

indexItem Slot ​

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