Question

您好我的ionic2应用程序中有以下标记，使用标签模板。我想为每个区域设置一个水平滚动条。

<ion-content>
  <ion-list>
    <ion-item-group *ngFor="let zone of zones">
      <ion-scroll scrollX="true">
        <ion-item-divider>
          ZONA: {{zone.zoneName}}
        </ion-item-divider>
        <ion-row>
          <ion-col col-4><h5>Equipo</h5></ion-col>
          <ion-col><h5>Pts</h5></ion-col>
          <ion-col><h5>PJ</h5></ion-col>
          <ion-col><h5>PG</h5></ion-col>
          <ion-col><h5>PE</h5></ion-col>
          <ion-col><h5>PP</h5></ion-col>
          <ion-col><h5>GF</h5></ion-col>
          <ion-col><h5>GC</h5></ion-col>
          <ion-col><h5>Dif</h5></ion-col>
        </ion-row>
        <ion-item *ngFor="let team of zone.zoneTeams">
          <ion-row>
            <ion-col col-4>{{team.name}}</ion-col>
            <ion-col>{{team.points}}</ion-col>
            <ion-col>{{team.matchesPlayed}}</ion-col>
            <ion-col>{{team.matchesWon}}</ion-col>
            <ion-col>{{team.matchesDrawn}}</ion-col>
            <ion-col>{{team.matchesLost}}</ion-col>
            <ion-col>{{team.goalsScored}}</ion-col>
            <ion-col>{{team.goalsReceived}}</ion-col>
            <ion-col>{{team.dif}}</ion-col>
          </ion-row>
        </ion-item>
      </ion-scroll>
    </ion-item-group>
  </ion-list>
</ion-content>

添加滚动标记时，我没有看到任何内容。我错过了什么？我正在使用最新的离子我点了这个链接http://ionicframework.com/docs/api/components/scroll/Scroll/

Answer 1

添加滚动标记时，我没有看到任何内容

Ion Scroll需要通过style或scss类提供固定尺寸。

<ion-scroll scrollX="true" style="width: 100vw;height: 50px;">
   <!-- your scrollable content -->
</ion-scroll>

Ionic2 +中的水平滚动条

1 个答案: