每个div内的离子2滚动不滚动

Question

我正在研究离子2项目，我有一个屏幕，有两个独立的网格视图。

第一个网格应该有40％的高度，所以在整个网格中应该滚动40％。

我的第二个网格应该可以连续滚动而不指定高度。它应该根据内容的大小滚动。第二个网格不像第一个网格。所以这里看起来像这样：

 < ion-content >

<div>
first Grid view divs
</div>

<div>
Second Grid view divs
</div>

</ion-content>

所以最初，我的<ion-content>根本没有完全滚动。但是当我为我的两个网格div提供一些特定的高度时。他们根本不滚动。这是我的代码

我的完整代码：

<ion-content class="no-scroll" style="width: 100%;overflow-y: hidden;">

//First Grid code start here
<div class="item item-body no-padding" scrollY="true" style="border-width: 0px !important;height: 42%;">  
  <!--  // grid view code start below here -->
<div class="row no-padding"  *ngFor="let data of ResourceDetailData;let i = index">
     <ng-container *ngIf=" i % 2 === 0">

          <div class="col col-50 custom-design2" style="background: url() no-repeat center;background-size: cover;">
               <div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i].categoryname}}</span></div>
            </div>

            <div class="col col-50 custom-design2" style="background: url() no-repeat center;background-size: cover;">
                 <div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i+1].categoryname}}</span></div>
             </div>
     </ng-container>


</div> 
</div> 

<!--  // First grid view code end here -->

// second grid code here

  <div class="item item-body no-padding" scrollY="true" style="border-width: 0px !important;">  
  <!--  // grid view code start below here -->
<div class="row no-padding"  *ngFor="let data of ResourceDetailData;let i = index">
     <ng-container *ngIf=" i % 2 === 0">

          <div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
               <div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i].categoryname}}</span></div>
            </div>

            <div class="col col-50 custom-design2" style="background: url() no-repeat center;background-size: cover;">
                 <div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i+1].categoryname}}</span></div>
             </div>
     </ng-container>


</div> 
</div>

// <!--  //second  grid view code end here -->

</ion-content >

Answer 1

我不确定我是否完全理解该方案，但您可以使用ion-scroll作为第一个网格。这样我们可以使用40％的页面高度，其余的用于其他网格。

请查看this plunker。这将是结果：

<ion-header>
  <ion-navbar>
    <ion-title>Ionic Demo</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-scroll style="width:100%;height:40%;" scrollY="true">

    <!-- First grid -->

  </ion-scroll>

  <!-- Second grid -->

</ion-content>