科爾多瓦/離子：保持離子滑動/離子卡內屏幕視圖

我一直在嘗試尋找或制定一個健全的解決方案，但到目前爲止還沒有拿出任何堅實的東西。我基本上試圖設計一個包含離子卡的離子載片，當然它包含某種類型的內容，其中之一是離子卷軸，不會經過屏幕的底部;這種設計必須是動態的，並適應任何屏幕尺寸。科爾多瓦/離子：保持離子滑動/離子卡內屏幕視圖

但是，儘管滾動內容的長度，它將始終超出屏幕視圖的界限;因此需要滾動（完全忽略離子滾動）。是否有任何動態的方法來計算屏幕底部的位置，並防止任何內容通過它，但有足夠的空間來防止離子滑動框的尋呼機與桌子重疊。下面是我所擁有的vs我試圖實現的代碼的截圖。

這是我現在有，如果我不定義高度離子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>

來源

2016-04-29 MattVon

你可能想嘗試使用離子含量和頁腳中 - 見http://ionicframework.com/docs/components/#footer

中離子含量面積爲您的應用程序的可滾動視口。雖然您的頁眉和頁腳將分別固定到頂部和底部，但內容區域將填充剩餘的可用空間。我認爲這是你正在尋找的

來源

2016-05-01 06:39:17

我試圖使用這種方法，不知道如果我把標籤放在正確的區域（把離子內容放在離子滑動部件內），它不起作用。 – MattVon

科爾多瓦/離子：保持離子滑動/離子卡內屏幕視圖

回答

相關問題