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

Question

在我的 index.html 中，我有一个带有 paper-toolbar 的 paper-scroll-header-panel 和一个用作页面内容的自定义元素：

<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 属性来 link 它到一个将触发滚动事件的元素，但我不确定我应该使用哪个元素。

我尝试将其设置为 body、document 和 paper-scroll-header-panel，但其中 none 在我滚动时有效 - 有些甚至在页面加载时触发当没有滚动发生时！

有人试过吗？

Answer 1

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

scrollThreshold.clearTriggers();

see this

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

iron-scroll-threshold in custom element

polymer

polymer-1.0