Question

我正在我的网站上开发使用聚合物的自助旋转木马。根据屏幕宽度，我想要显示两种类型的图像。我已经编写了相同的代码，但问题是当宽度改变时图像不会改变。先感谢您！

<dom-module id="carousel">

<style>

    :host {
        display: block;
    }

    img {
        width: 100%;
        height: 100%;
    }

</style>


<template>

    <div class="container">

        <div id="Carousel" class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators" style="margin-bottom:0px; z-index:1;">
                <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                <li data-target="#Carousel" data-slide-to="1"></li>
            </ol>

            <div class="carousel-inner center" role="listbox">
                <div class="item active">
                    <img src= "{{ img1 }}" >
                </div>
                <div class="item">
                    <img src= "{{ img2 }}" >
                </div>
            </div>

        </div>
     </div>             

</template>


<script>
    Polymer({

        is: 'carousel',

        properties: {
            img1: { type: String, notify: true },
            img2: { type: String, notify: true },
        },

        ready: function() {
            this.methodToFixLayout();
            $(window).on( "resize", this.methodToFixLayout );
        },

        methodToFixLayout: function() {
            var windowsize = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if( windowsize > 1000 ) {
                this.img1 = "//large01.jpg";
                this.img2 = "//large02.jpg";
            } else {
                this.img1 = "//small01.jpg";
                this.img2 = "//small02.jpg";
            }
        },

    });

</script>

Answer 1

我建议您使用铁图像，这是一个显示图像的元素，提供标准标记中未提供的有用尺寸和预加载选项，如文档iron-image中所述。因为你会使你的应用程序更重，使用多个图像来匹配特定的屏幕。（响应总是更好）。无论如何如果你想要使用你的元素，你最好利用 iron-media-query数据绑定到多个媒体查询。这是一个更详细的旋转木马元素实现，希望它有帮助

<dom-module id="my-carousel">
  <style>
    :host {
      display: block;
    }

    img {
      width: 100 %;
      height: 100 %;
    }
  </style>
  <template>
    <div class="container">
      <div id="Carousel" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators" style="margin-bottom: 0px; z-index: 1;">
          <li data-target="#Carousel" data-slide-to="0" class="active"></li>
          <li data-target="#Carousel" data-slide-to="1"></li>
        </ol>

        <div class="carousel-inner center" role="listbox">

          <!-- use is dom-repeat -->
          <template is="dom-repeat" items="{{images}}" as="item">
            <div class="item">
              <img src$="{{_selectImage(item)}}" class$="{{ _isActive(item.active)}}"/>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- iron-media-query -->
    <iron-media-query query="(min-width: 601px)" query-matches="{{_isMobile}}"></iron-media-query>
  </template>
  <script>
    Polymer({
      //Caution: an element name must ALWAYS contain a dash
      is: 'my-carousel',
      properties: {
        //Using Array for your images 
        images: {
          type: Array,
          value: function() {
            return [{
              small: '//small01.jpg',
              large: '//large01.jpg',
              active: true
            }, {
             small: '//small02.jpg',
             large: '//large02.jpg',
            active: false
            }];
          }
        },
        //true when min-width=601px
        _isMobile: {
          type: Boolean,
          value: false,
          notify: true
        }
      },

      // return the status of the image
      _isActive: function(item) {
        return item.active === true ? 'active' : '';
      },

      _selectImage: function(item) {
        if (_isMobile) {
          return item.small;
        } else {
          return item.large;
        }
      }
    });
  </script>
</dom-module>

Answer 2

是的，解决方案结果非常简单。刚在Polymer中进行了以下更改。

Polymer({

    is: 'carousel',

    behaviors: [
                Polymer.IronResizableBehavior
            ],

    listeners: {
        'iron-resize': '_onIronResize'
    },

    properties: {
        img1: { type: Image, notify: true },
        img2: { type: Image, notify: true },
    },

    _onIronResize: function() {
        var windowsize = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if( windowsize > 600 ) {
            this.img1 = "//large-1.jpg";
            this.img2 = "//large-2.jpg";
        } else {
            this.img1 = "//small-1.jpg";
            this.img2 = "//small-2.jpg";
        }
    },

    });

根据屏幕宽度加载不同的图像

2 个答案: