Cordova/Ionic：将 ion-slide/ion-card 保留在屏幕视图内

Posted 2023-03-06

【中文标题】Cordova/Ionic：将 ion-slide/ion-card 保留在屏幕视图内

【英文标题】：Cordova/Ionic: Keep ion-slide/ion-card inside screen view

【发布时间】：2016-08-24 16:23:32

【问题描述】：

多年来，我一直在尝试寻找或制定一个合理的解决方案，但到目前为止还没有提出任何可靠的解决方案。我本质上是在尝试设计一个包含离子卡的离子幻灯片，其中当然包含某种内容，其中一个是离子滚动而不会越过屏幕底部；这种设计必须是动态的，并且可以适应任何屏幕尺寸。

然而，尽管滚动中的内容很长，但它总是会超出屏幕视图的范围；因此需要滚动（完全忽略离子滚动）。是否有任何动态方法来计算屏幕底部的位置，并防止任何内容通过它，但有足够的空间来防止 ion-slide-box 的寻呼机与表格重叠。下面是我所拥有的与我正在尝试实现的 + 代码的屏幕截图。

如果我没有为 ion-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>

【参考方案1】：

您可能想尝试在内部使用 ionic 内容和页脚 - 请参阅 http://ionicframework.com/docs/components/#footer

Ionic 中的内容区域是应用的可滚动视口。虽然您的页眉和页脚将分别固定在顶部和底部，但内容区域将填充剩余的可用空间。 我想这就是你要找的东西

【讨论】：

我尝试使用这种方法，但不确定我是否将标签放置在正确的区域（将离子含量放在离子滑动部件内）并且它不起作用。