Блог

Я использую полимер iron-list с бумажной картой, но проблема в том, что все карты перекрываются, пока не изменится ориентация устройства. Как мне вызвать notifyResize() of iron-list после загрузки изображения paper-card .

  <iron-list items="[[data.data]]" as="item" scroll-target="document">
        <template>

            <div style="margin-top: 20px">

                <!--Card with header image-->
                <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
                    <div class="card-content">
                        <b>#[[index]] - [[item.category]]</b>
                        <p>[[item.heading]]</p>
                    </div>
                    <div class="card-actions">
                        <paper-button>Share</paper-button>
                        <paper-button>Explore!</paper-button>
                    </div>
                </paper-card>

            </div>


        </template>
    </iron-list>
  

Вы запустите notifyResize() метод для самого iron-sort элемента.

 <iron-list items="[[data.data]]" as="item" scroll-target="document">
  ...
</iron-list>
document.querySelector('iron-list').notifyResize()
  

Я только что наткнулся на ту же проблему при разработке своего приложения, и вот решение, которое я придумал, однако в зависимости от того, какой стиль вы применили к списку железа, ваш пробег может отличаться.

 Polymer
({
  is: "tt-itinerary-list",
  properties:
  {
    list:
    {
      type: Array,
      value:[]
    }
  },
  init: function(data)
  {
    var instance = this;
    instance.set("list", data);

    instance.async(instance._monitorImageLoad, 200);
  },
  _monitorImageLoad: function()
  {
    var instance = this;

    var images = instance.querySelectorAll("paper-card .header img");

    for(var i = 0; i < images.length;   i)
    {
      (function(image)
      {
        // if image is already loaded
        if(image.complete)
        {
          instance._resizeList();
        }
        // wait for the image to load
        else
        {
          image.addEventListener
          (
            "load",
            instance._resizeList.bind(instance)
          )
        }
      })(images[i]);
    }
  },
  _resizeList: function()
  {
    var instance = this;
    instance.$.list.fire("iron-resize");
  }
});
  

По сути, происходит то, что мы вызываем init функцию всякий раз, когда получаем новые данные. Затем мы асинхронно вызываем _monitorImageLoad функцию, которая перебирает все изображения в paper-card заголовках, а затем отслеживает процесс их загрузки. Если изображение уже загружено, мы просто уведомляем iron-list , что оно нуждается в изменении размера (через iron-resize событие), в противном случае мы ждем его загрузки, прежде чем уведомлять.