科尔多瓦/离子：保持离子滑动/离子卡内屏幕视图

我一直在尝试寻找或制定一个健全的解决方案，但到目前为止还没有拿出任何坚实的东西。我基本上试图设计一个包含离子卡的离子载片，当然它包含某种类型的内容，其中之一是离子卷轴，不会经过屏幕的底部;这种设计必须是动态的，并适应任何屏幕尺寸。科尔多瓦/离子：保持离子滑动/离子卡内屏幕视图

但是，尽管滚动内容的长度，它将始终超出屏幕视图的界限;因此需要滚动（完全忽略离子滚动）。是否有任何动态的方法来计算屏幕底部的位置，并防止任何内容通过它，但有足够的空间来防止离子滑动框的寻呼机与桌子重叠。下面是我所拥有的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

科尔多瓦/离子：保持离子滑动/离子卡内屏幕视图

回答

相关问题