Question

我的代码如下：

<ion-scroll style="height:200px;">
<ion-item  ng-repeat="items in Items" >
<!--repeat group-->
</ion-item>
</ion-scroll>

我有一个高度= 200px的滚动视图，这在小型设备上看起来不错，但是当我在大型设备上查看时，内容显得太小，因为高度是'200px＆＃39;这是相对较小的。那么，解决这个问题的正确方法是什么？我尝试使用高度百分比，但它没有修复。请帮助和抱歉我的英语不好。

Answer 1

使用vh单位代替px。您可以将vh值设置为1到100,100 vh表示全屏大小。您的代码将是：

<ion-scroll style="height:100vh;">

或如果height不起作用，那么

<ion-scroll style="max-height:100vh;">

有关vh样式的有用link。

Answer 2

我做了什么，在您的滚动中，使用此类包装它：modal-parent，modal-top，modal-scroll

<ion-modal-view class="modal-parent">

  <ion-item class="modal-top">
    ...
  </ion-item>

  <ion-scroll class="modal-scroll" style="height:100px;width:100%;"...>
    ...
  </ion-scroll>

</ion-modal-view>

你在js中定义了这个函数：

  function setScrollHeight(parent, top, scroll, index, offset){
    var parentH = document.getElementsByClassName(parent)[index].clientHeight;
    var topH = document.getElementsByClassName(top)    [index].clientHeight;
    var scrollH = document.getElementsByClassName(scroll)[index];

    scrollH.style.height = parentH - topH - offset + 'px';
  }

你已准备好通过这样的方式来打电话了

setScrollHeight('modal-parent', 'modal-top', 'modal-scroll',1 ,100);

基本上，modal-parent将减去modal-top，结果将设置为modal-scroll的高度

offset类似于填充

Ionic - 如何设置<ion-scroll>高度，以便在所有分辨率设备中自动调整？

2 个答案: