聚合物，铁媒体查询无法正常工作

Question

我希望 iron media query 在查询匹配更改时调用函数并检查查询匹配是否为真，做点什么...

这是我的代码：

<dom-module id="example-example">
  <style>     
  </style>

  <template>

       <iron-media-query query="(min-width: 200px)" query-matches="{{small}}" on-query-matches-changed="detectSmall"></iron-media-query>
       <iron-media-query query="(min-width: 1400px)" query-matches="{{large}}" on-query-matches-changed="detectLarge"></iron-media-query>

  </template>

  <script>
    Polymer({
      is: 'example-example',
        detectLarge: function(){
            console.log(this.large);
        },
        detectSmall: function(){
            console.log(this.small);
        }
    });
  </script>
</dom-module>

我第一次加载页面时，我的设备宽度是 1300 像素，所以 this.small 应该是正确的，但它是未定义的。

我到底做错了什么？

Answer 1

原因是当您的 change 事件被触发时，Polymer 仍未完成该元素。如果你想在你的函数中访问那个属性你可以像这样使用它

detectLarge: function(e){
        console.log(e.detail.value);
    },

聚合物，铁媒体查询无法正常工作

polymer , iron media query not working correctly

polymer

polymer-1.0