Question

我现在一直在面对这个挑战，当手机上安装了应用程序时，我的网格没有滚动，但是我在我的系统上滚动离子实验室。
我认为它与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>？也许这会导致滚动问题。

离子网格在ionic2中不可滚动

1 个答案: