IndexList 索引列表

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

平台差异说明

基本使用

外层包裹一个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>

API

IndexBar Props

IndexAnchor Props

IndexBar Events

IndexAnchor Slots