Question

我正在使用铁页。里面有四个元素，一个是卡片网格，其他是卡片的项目。没有什么花哨。在铁页之外我已经设置了一些固定位置的导航按钮（下一个和上一个）。

<iron-pages id="pages" class="flex" attr-for-selected="page" selected="{{pageSelected}}">

    <my-grid id="grid" page="grid"></my-grid>

    <page-alpha page="alpha"></page-alpha>
    <page-beta  page="beta"></page-beta>
    <page-gamma page="gamma"></page-gamma>

</iron-pages>

              <!-- Navigation Buttons -->
<div id="controls" class="buttons" hidden$="{{_hideControls}}">
   <button-previous id="previous" on-tap="_goPrev"></button-previous>
   <button-next id="next" on-tap="_goNext"></button-next>
</div>

我的问题是：只有当我在网格页面中时，如何以聚合物方式隐藏导航按钮？

我有一些想法，但我认为语法不正确或缺少某些内容

<script>
 _hideControls: function(){
    if (this.pageSelected = 'grid') {
      this.$.controls.hide();
    } else {
      this.$.controls.show();
    }
}
</srcipt>

Answer 1

此：

<script>
 _hideControls: function(){
    if (this.pageSelected = 'grid') {
      this.$.controls.hide();
    } else {
      this.$.controls.show();
    }
}
</script>

应该是这个（还要注意比较中添加的=字符）：

<script>
 _hideControls: function(){
    if (this.pageSelected == 'grid') {
      return true;
    } else {
      return false;
    }
}
</script>

而且，这个：

hidden$="{{_hideControls}}"

应该是这样的：

hidden$="{{_hideControls()}}"

为什么呢？因为如果函数返回true，隐藏属性将设置为true（或者更确切地说保持）。当您希望在响应事件时调用方法时，您使用语法_hideControl而不是_hideControls()的唯一时间（我知道）。见下文：

<div on-tap="_hideControls"></div>

编辑要在例如pageSelected更改时进行更新，请执行以下操作：

    <script>
     _hideControls: function(pageSelected){
        if (pageSelected == 'grid') {
          return true;
        } else {
          return false;
        }
    }
    </script>

和

hidden$="{{_hideControls(pageSelected)}}"

现在发生的是每次_hideControls更改时都会运行方法pageSelected。很方便！

Answer 2

您需要收听iron-select和iron-deselect事件。该事件附带所选项目的id（如果您在html中定义了id）。在您的情况下，您可以检查ID是否为grid然后执行操作。此外，_hideControls应该是Boolean属性。请尝试以下代码。

<iron-pages id="pages" class="flex" attr-for-selected="page" selected="{{pageSelected}}" 
on-iron-select="onSelect" on-iron-deselect="onDeselect">

    <my-grid id="grid" page="grid"></my-grid>

    <page-alpha page="alpha"></page-alpha>
    <page-beta  page="beta"></page-beta>
    <page-gamma page="gamma"></page-gamma>

</iron-pages>

              <!-- Navigation Buttons -->
<div id="controls" class="buttons" hidden$="{{hideControls}}">
   <button-previous id="previous" on-tap="_goPrev"></button-previous>
   <button-next id="next" on-tap="_goNext"></button-next>
</div>

脚本：

<script>
 onSelect: function(e) {
   if(e.detail.item.id === 'grid') {
     this.hideControls = true;
   }
 }
 onDeselect: function(e) {
   if(e.detail.item.id === 'grid') {
     this.hideControls = false;
   }
 }
</script>

如何在选中时仅在特定页面上使用隐藏的attr

2 个答案: