Question

我希望铁媒体查询在查询匹配更改时调用函数并检查查询是否匹配，是否执行某些操作...

这是我的代码：

<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>

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

我到底错在了什么？

Answer 1

原因是当你的改变事件被触发时，聚合物仍未完成元素。如果要在函数中访问该属性，可以像这样使用它

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

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

1 个答案: