Ionic Grid 在 ionic2 中不可滚动

Question

我现在一直面临这个挑战，当应用程序安装在 phone 上时，我的网格没有滚动，但我在系统上的 ionic lab 上滚动。
我认为它与 CSS 有关，我添加了很多样式，overflow : scroll 和一些调整但仍然表现相同，我也花了很多时间来获取哥们笑了，还是不行

这是我的代码。

<ion-navbar *navbar>
    <ion-toolbar>
        <ion-buttons start>
            <button (click)="NewPostPage()" primary>
            <ion-icon name="add" class="icon-color"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Posts</ion-title>
        <ion-buttons end>
            <button (click)="ProfilePage()" primary>
            <ion-icon name="person" class="icon-color"></ion-icon>
            </button>
        </ion-buttons>
        <ion-buttons end>
            <button (click)="SettingPage()" primary>
            <ion-icon name="settings" class="icon-color"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-navbar>
<ion-content> 
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content primary></ion-refresher-content>
    </ion-refresher>
      <ion-grid style="overflow: scroll !important;">
        <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>
         <ion-row> 
            <ion-col width-50>
            </ion-col>
            <ion-col width-50>
            </ion-col>
        </ion-row>        
      </ion-grid>
</ion-content>
<button *ngIf="fabCore1" fab fab-bottom fab-right (click)="Stylist()" class="fab-core-2" fab-core-color-1>
  <ion-icon name="radio-button-off"></ion-icon>
</button>
<button *ngIf="fabCore2" fab fab-bottom fab-right (click)="Chat()" class="fab-core-1" fab-core-color-2>
  <ion-icon name="chatboxes" style="margin-top: 4px;font-size: 22px;"></ion-icon>
</button>

<button fab fab-bottom fab-right (click)="ToggleHide()"  primary>
  <ion-icon name="more"></ion-icon>
</button>

Answer 1

也许你应该使用 <ion-col col-6>，而不是 <ion-col width-50>？也许这会导致滚动问题。

Ionic Grid 在 ionic2 中不可滚动

Ionic Grid is not scrollable in ionic2

ionic-framework

ionic2