離子2滾動內每個div不滾動

我正在離子2項目，其中我有一個屏幕與兩個單獨的網格視圖。離子2滾動內每個div不滾動

第一個網格應該有40％的高度，所以在整個網格內應該滾動40％。

而我的第二個網格應該可以連續滾動而不指定高度。它應該根據內容的大小進行滾動。這第二個網格不像第一個網格。因此，這裏看起來就像這樣：

< ion-content > 

<div> 
first Grid view divs 
</div> 

<div> 
Second Grid view divs 
</div> 

</ion-content>

所以一開始，我<ion-content>沒有完全在所有的滾動。但是當我爲我的兩個格子格給予特定的高度時。他們根本不滾動。這裏是我的代碼

我全碼：

<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 >

來源

2017-05-02 hybrid Dev

我不知道我是否完全瞭解情況，但你可以使用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>

來源

2017-05-02 15:47:47 sebaferreras

大....我這裏有一個問題http://stackoverflow.com/questions/43496455/how-to-show-pdf-file- in-ionic-app-with-out-download離子1 –

離子2滾動內每個div不滾動

回答

相關問題