每个 div 内的 ionic 2 滚动不滚动

Question

我正在做 ionic 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>

每个 div 内的 ionic 2 滚动不滚动

ionic 2 scroll inside each div is not scrolling

html

css

angularjs

hybrid-mobile-app

ionic2