科尔多瓦/离子:保持离子滑动/离子卡内屏幕视图
问题描述:
我一直在尝试寻找或制定一个健全的解决方案,但到目前为止还没有拿出任何坚实的东西。我基本上试图设计一个包含离子卡的离子载片,当然它包含某种类型的内容,其中之一是离子卷轴,不会经过屏幕的底部;这种设计必须是动态的,并适应任何屏幕尺寸。科尔多瓦/离子:保持离子滑动/离子卡内屏幕视图
但是,尽管滚动内容的长度,它将始终超出屏幕视图的界限;因此需要滚动(完全忽略离子滚动)。是否有任何动态的方法来计算屏幕底部的位置,并防止任何内容通过它,但有足够的空间来防止离子滑动框的寻呼机与桌子重叠。下面是我所拥有的vs我试图实现的代码的截图。
这是希望的观点我会在所有的幻灯片一样,在底部寻呼机和滚动完成之前寻呼机开始需要动态,因此可以根据屏幕大小进行更改。
这是我的代码不包括任何指定的高度要求(这是固定在所有的屏幕尺寸是不理想)。
<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>
答
你可能想尝试使用离子含量和页脚中 - 见http://ionicframework.com/docs/components/#footer
中离子含量面积为您的应用程序的可滚动视口。虽然您的页眉和页脚将分别固定到顶部和底部,但内容区域将填充剩余的可用空间。 我认为这是你正在寻找的
我试图使用这种方法,不知道如果我把标签放在正确的区域(把离子内容放在离子滑动部件内),它不起作用。 – MattVon