Question

我已经尝试了很长时间才找到或找到一个合理的解决方案，但到目前为止还没有找到任何可靠的解决方案。我基本上试图设计一个包含离子卡的离子载片，当然它包含某种内容，其中一种是离子卷轴而不会越过屏幕的底部;这种设计必须是动态的，并适应任何屏幕尺寸。

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

如果我没有定义离子池的高度，这就是我目前所拥有的

这是我喜欢的所有幻灯片，底部的寻呼机以及在寻呼机启动之前滚动完成需要动态的视图，因此可以根据屏幕尺寸进行更改。

这是我的代码，不包括任何指定的高度要求（在所有不适合的屏幕尺寸上都是固定的）。

    <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

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

Cordova / Ionic：在屏幕视图中保持离子滑动/离子卡

1 个答案: