iron-scroll-threshold не работает с app-header-layout - PullRequest
Новая
       7

iron-scroll-threshold не работает с app-header-layout

0 голосов
/ 24 мая 2018

Кажется, я не могу заставить iron-scroll-threshold работать с iron-list внутри app-header-layout.

. Обратите внимание, что из соображений совместимости с некоторыми сторонними компонентами я все еще использую Polymer 1 (1.11.3).

Вот пример сокращенного кода: 

<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/app/:view" data="{{routeData}}" tail="{{subRoute}}"></app-route>
<app-route route="{{subRoute}}" pattern="/:id" data="{{idData}}" active="{{onDetailPage}}"></app-route>

<app-drawer-layout>

    <app-drawer slot="drawer" swipe-open>
        <app-toolbar class="navToolbar">
            <a href="/app/foo" drawer-toggle>Menu Item 1</a>
        </app-toolbar>
    </app-drawer>

    <app-header-layout>
        <app-header class="mainHeader" condenses fixed effects="resize-title blend-background waterfall" slot="header">
            <app-toolbar>
                <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
                <h4 condensed-title>Summary</h4>
            </app-toolbar>
            <app-toolbar class="tall">
                <h1 main-title>Welcome</h1>
            </app-toolbar>
        </app-header>

        <iron-pages selected="[[routeData.view]]" attr-for-selected="name" fallback-selection="home">
            <time-line name="foo"></time-line>
            <!-- other elements / pages -->
        </iron-pages>

    </app-header-layout>
</app-drawer-layout>

Элемент, который я хочу прокрутить: 

<dom-module id="time-line">

    <template>

        <app-location route="{{route}}"></app-location>
        <app-route route="{{route}}" pattern="/app/:view" data="{{routeData}}" tail="{{subRoute}}"></app-route>
        <app-route route="{{subRoute}}" pattern="/:id" data="{{idData}}" active="{{onDetailPage}}"></app-route>

        <iron-ajax id="loadData" attr="/api/foo" handle-as="json" on-response="dataLoaded"></iron-ajax>

        <style is="custom-style"></style>

        <iron-scroll-threshold id="threshold" on-lower-threshold="_loadMoreData">
            <iron-list id="list" items="[[datas]]" as="data" scroll-target="threshold">
                <template>
                    <div class="layout vertical">
                        <p>[[data]]</p>
                    </div>
                </template>
            </iron-list>
        </iron-scroll-threshold>

    </template>

    <script>

        Polymer({
            is : "time-line",
            properties: {
                pagee: {
                    type: Number,
                    value: -1
                },
                datas: {
                    type: Array,
                    value: []
                }
            },
            init: function() {
                this.pagee = 0;
                this.$.loadData.params = { "page" : this.pagee };
                this.$.loadData.generateRequest();
            },
            dataLoaded: function(e) {
                if (!this.datas) this.datas = [];
                if (e.detail.response.length > 0) {
                    e.detail.response.forEach(function(element) {
                        this.push("datas", element);
                    }.bind(this));
                    this.$.threshold.clearTriggers();
                }
            },
            _loadMoreData: function() {
                this.pagee++;
                this.$.loadData.params = { "page" : this.pagee };
                this.$.loadData.generateRequest();
            }
        });

    </script>

</dom-module>

1 Ответ

0 голосов
/ 24 мая 2018

Я только что нашел решение случайно (и читал документы для x-го раза): 

<iron-scroll-threshold scroll-target="document" id="threshold" on-lower-threshold="_loadMoreData">

scroll-target="document" было отсутствующей частью.

Редактировать 1

Подождите ... У меня есть два элемента с ìron-list и iron-scroll-threshold, и на обоих я установил scroll-target="document".

Теперь эффект заключается в том, что, когда я прокручиваю один из этих элементов, метод _loadMoreData запускается для обоих элементов.Странно.

Редактировать 2

Я взломал обходной путь, который, кажется, "исправляет" проблему:

Определите эту функцию: 

function resetDocumentScrollers() {
    var ist = document.querySelectorAll("iron-scroll-threshold");
    [].forEach.call(ist, function(e) {
        e.scrollTarget = null;
    });
}

И в моем обычном init() методе каждого элемента я называю: 

resetDocumentScrollers();
this.$.threshold.scrollTarget = "document";

Как уродливо.

...