Cordova/Ionic：画面内にイオンスライド/イオンカードを置いておいてください

Question

私は、年を取って健全な解を見つけようと努力してきましたが、私は本質的に、イオンカードを含むイオンスライドを設計しようとしています。イオンカードにはもちろん、画面の下部を通過することなくイオンスクロールが含まれています。このデザインは動的で、どの画面サイズにも対応する必要があります。

ただし、スクロール内のコンテンツの長さにもかかわらず、常に画面ビューの境界から外れます。スクロール（イオンスクロールを完全に無視する）する必要がある。画面の下部がどこにあるかを計算し、コンテンツがそれを通過するのを防ぐためのダイナミックなアプローチはありますが、ポケベルがイオンスライドボックスの表と重なってしまうのを防ぐのに十分なスペースです。以下は私が+コードを達成しようとしているものと対比しているもののスクリーンショットです。

これは私がこれは私が前にすべてのスライド、下部のポケットベルやスクロール仕上げを越えたい目的のビューをイオンscollため

を高さを定義しない場合、私が現在持っているものですポケベルは動的である必要があるため、画面サイズごとに変更することができます。

これは（理想的ではない、すべての画面サイズを越え固定されている）任意の指定された高さの要件を除く私のコードです。

<ion-slide-box on-slide-changed="slideHasChanged($index)" style="margin-top: -15px; height: 100%;"> 
<ion-slide> 
       <div class="list card"> 
        <div class="item item-divider title item-toggle"> 
         Sales {{ SalesDate }} 
         <label class="toggle toggle-calm" style="margin: -13px;"> 
          <input type="checkbox" ng-click="swap(SalesDate, '')"> 
          <div class="track"> 
           <div class="handle"></div> 
          </div> 
         </label> 
        </div> 
        <div class="item item-text-wrap"> 
         <p ng-if="data.chartData.sales.length == 0">No data!</p> 
         <canvas id="pie" 
           class="chart chart-pie" 
           chart-data="data.chartData.sales" 
           chart-labels="data.dept" 
           chart-options="data.chartOptions" 
           chart-colours="data.chartData.hex"></canvas> 
        </div> 
        <table class="table table-striped"> 
         <thead> 
          <tr> 
           <th><b>#</b></th> 
           <th style="text-align: right;"><b>Sales</b></th> 
          </tr> 
         </thead> 
        </table> 
        <ion-scroll ng-if="SalesDate == '(Week)'"> 
         <table class="table table-striped"> 
          <tbody> 
           <tr ng-repeat="(key, value) in data.sales"> 
            <td><i class="fa fa-square" style="color: {{ value.hex }}"></i> {{ key }}</td> 
            <td style="text-align: right;">{{ value.saleAmount | currency: "£" }}</td> 
           </tr> 
          </tbody> 
         </table> 
        </ion-scroll> 
        <ion-scroll ng-if="SalesDate == '(Today)'"> 
         <table class="table table-striped"> 
          <tbody> 
           <tr ng-repeat="(key, value) in data.sales"> 
            <td><i class="fa fa-square" style="color: {{ value.today.hex }}"></i> {{ key }}</td> 
            <td style="text-align: right;">{{ value.today.saleAmount | currency: "£" }}</td> 
           </tr> 
          </tbody> 
         </table> 
        </ion-scroll> 
       </div> 
      </ion-slide> 
</ion-slide-box> 

Answer 1

あなたは内部のイオンコンテンツとフッターを使用しようとすることをお勧めします - イオンのコンテンツエリアアプリのスクロール可能なビューポートであるhttp://ionicframework.com/docs/components/#footer

を参照してください。ヘッダーとフッターがそれぞれ上部と下部に固定されている間、コンテンツ領域は残りの空き領域を埋めるでしょう。 私はこれがあなたが探しているものと仮定します