Question

在我的index.html我有paper-scroll-header-panel paper-toolbar，自定义元素作为页面内容：

<body unresolved>
    <template is="dom-bind" id="app">
        <paper-scroll-header-panel>
            <paper-toolbar class="medium-tall">
                ...
            </paper-toolbar>

            <!-- Main Content -->
            <div class="content">
                <x-content></x-content>
            </div>
        </paper-scroll-header-panel>
    </template>
</body>

在x-content中，我有一个firebase-collection我正在循环显示数据：

<dom-module id="x-content">
    <template>
        <firebase-collection
            limit-to-first="30"
            location="myFirebaseURL"
            data="{{items}}"></firebase-collection>

        <template is="dom-repeat" items="{{items}}">
            <x-item item="{{item}}"></x-item>
        </template>
    </template>
    <script>
        Polymer({
            is: "x-content",
            _loadMoreData: function (e) {
                // load more
            }
        });
    </script>
</dom-module>

我希望能够在用户滚动时加载更多数据。我尝试过实施iron-scroll-threshold，但它无效。我希望我需要使用scrollTarget属性将它链接到一个元素，该元素将触发滚动事件，但我不确定应该使用哪个元素。

我尝试将其设置为body，document和paper-scroll-header-panel，但是当我滚动时，这些都不起作用 - 有些甚至在没有滚动的情况下在页面加载时触发！

有没有人试过这个？

Answer 1

您可以尝试链接到paperScrollHeaderPanel.scroller 并确保在加载数据函数时清除触发器：

scrollThreshold.clearTriggers();

see this

自定义元素中的iron-scroll-threshold

1 个答案: