Question

我正在使用collection-repeat（来自离子框架）在我的应用程序中显示信封列表。效果很好，但我想微调布局。每个信封为150px×80px并且它会流动（因此更宽的显示器将有3或4或5列）。

我已经计算了为了使网格居中而需要添加到左侧的填充量，但我无法弄清楚如何更新DOM（我不想使用jQuery）。有什么建议吗？

这是我的HTML模板：

<ion-content has-tabs="true">
  <div class="envelope-wrapper"
      collection-repeat="envelope in envelopes"
      collection-item-width="150"
      collection-item-height="80">
    <div class="envelope" style="background: {{ envelope.color }}">
      <div class="name">{{ envelope.name }}</div>
      <div class="amount">{{ envelope.amount | humanMoney }}</div>
    </div>
  </div>
</ion-content>

这是我的SCSS：

.envelope-wrapper {
  padding: 4px;
  height: 80px;
  width: 150px;

  .envelope {
    height: 100%;
    width: 100%;
    background: #eee;
    border: 1px solid rgba(0, 0, 0, .35);
    border-bottom: 1px solid rgba(0, 0, 0, .75);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .5), 0 1px 3px #ccc;

    .name { ... }
    .amount { ... }
  }
}

以下是渲染时的样子。注意右侧的所有空白区域。正如我所说，我已经计算出空间有多宽，我知道我需要在左边填充的像素数，但我无法弄清楚如何添加左边距。

Screenshot http://f.cl.ly/items/1w2C2u2a2B3Y0I1A362u/Screen%20Shot%202015-01-08%20at%209.14.59%20PM.png

Answer 1

只需将另一个包装器div作为 .envelope-wrapper 的父级，您可以直接在集合项目中设置样式，该项目具有位置：绝对值; attribute，它将元素定位在DOM的预先计算的部分中，而不影响兄弟元素，因此应用了填充但不是所需的。让每个集合元素的宽度为50％，并在其内部工作。

<!-- Completed the code with the updated directives and attributes -->

<ion-content has-tabs="true">
  <ion-list>      
    <!--if you want a 10px margin bottom-->
    <ion-item collection-repeat="envelope in envelopes" item-width="50%" item-height="90">

      <div class="envelope-wrapper"
        <div class="envelope" style="background: {{ envelope.color }}">
          <div class="name">{{ envelope.name }}</div>
          <div class="amount">{{ envelope.amount | humanMoney }}</div>
        </div>
      </div>
    </ion-item>
  </ion-list>
</ion-content>

如何将物品集中在一个集合中 - 重复离子？

1 个答案: