首页 > 解决方案 > 组件内的闪电组件列表

问题描述

我正在尝试在另一个组件中创建一个可滚动的组件列表。我正在使用卡片视图来包含我的信息。当我尝试以下代码时,可滚动视图得到了一个奇怪的结果。

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="ContentListController">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <!-- Global decleration for the Content Id selected -->
    <aura:attribute name="ContenList" type="Content__c[]"/>

    <div style="max-height: 400px;overflow-y: auto;">
        <aura:iteration items="{!v.ContenList}" var="store">
            <c:ContentCard content="{!store}" duration="1" />
        </aura:iteration>
    </div>

</aura:component>

我得到的结果是滚动条在无人区一直处于关闭状态。

在此处输入图像描述

我一直在寻找它,它是一个看不见的滚动条,或者至少在左边没有所有的填充。

在此处输入图像描述

标签: salesforcesalesforce-lightning

解决方案


您的 div 占用了所有可用宽度,而您的卡片 (c:ContentCard) 的宽度以某种方式受到限制。这就是为什么您的卡片和滚动条之间存在间隙的原因。我建议您: 1) 从 ContentCard 组件中删除宽度限制;2) 将组织页面上组件分布的责任委托给更高的组件。您可以使用slds-gridslds-col闪电类控制组件的结构。


推荐阅读