javascript - 在 afterRender() 中获取 div 的高度

Question

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

我的问题是，当我在事件执行时检查控制台中的 chpCard 组件(请参阅“chpTarget”变量)时，该元素似乎在没有宽度/高度的情况下呈现。我已经检查了它的 offsetHeight 并将其渲染为 0。但是当 Lightning 完成后我再次检查它时，我得到了具有正确值的 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，其中存在这些元素的真正值(value)，但我并没有屏住呼吸。 :S

Answer 1

想通了。您需要获取具体组件并深入研究它以获取值。

component.getConcreteComponent().getElements()

将返回基础div。还有一个 getElement() 方法来获取特定元素。