如何在 ionic 中将 collection-repeat 中的项目居中？

Question

我正在使用 collection-repeat（来自离子框架）在我的应用程序中显示信封列表。效果很好，但我想 fine-tune 布局。每个信封为 150 像素 x 80 像素并且它是流动的（因此更宽的显示器将有 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 { ... }
  }
}

这是渲染后的样子。注意右侧所有的白色 space。正如我所说，我已经计算出 space 的宽度并且我知道我需要在左侧填充的像素数，但我就是不知道如何添加左侧填充。

Answer 1

只需放置另一个包装器 div 作为 .envelope-wrapper 的父级，您正试图直接在集合项中设置样式，其中有一个 position: absolute; 属性，它将元素定位在 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>

如何在 ionic 中将 collection-repeat 中的项目居中？

How to center items in a collection-repeat in ionic?

ionic-framework