Question

我有一个afterRender函数，该函数具有一个事件侦听器，当用户向下滚动页面时，它会将固定的类添加到元素中。将元素固定到页面上会产生间隙，使所有后续元素看起来都像在“跳起来”。我的想法是创建一个具有固定div高度的空div，并在滚动事件发生时代替它，以消除“跳转”。

我的问题是，当我在事件执行时检查控制台中的chpCard组件（请参见“ chpTarget”变量）时，该元素似乎正在呈现而没有宽度/高度。我已经检查了它的offsetHeight，并重新变为0。但是，当闪电完成后，再次检查它时，我得到具有正确值的offsetHeight。所以我的问题是：我应该如何获得身高？ afterRender是否意味着DOM中的所有内容都可以使用了？为什么将其渲染为高度为0的元素？

这是CMP：

<lightning:card class="slds-page-header slds-page-header_object-home" aura:id="chpCard">
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
</lightning:card>

这是渲染方法

afterRender: function(component, helper) {
    this.superAfterRender();

    window.addEventListener('scroll', function (event) {
        var chpTarget = component.find('chpCard');
        var wrapper = component.find('chpWrapper');

        if (event.srcElement.documentElement.scrollTop > 12) {
            $A.util.addClass(chpTarget, 'slds-is-fixed');
        } else {
            $A.util.removeClass(chpTarget, 'slds-is-fixed');
        }
    });
}

我希望闪电产生某种虚拟的DOM，这些元素的真实价值存在于此，但我没有屏息。：S

Answer 1

弄清楚了。您需要获取具体组件，并深入研究以获得价值。

component.getConcreteComponent().getElements()

将返回基本div。还有一个getElement（）方法来获取特定的元素。

在afterRender（）中获取div的高度

1 个答案: