Question

我的HTML看起来像这样：

我有静态离子项，列表中的项目数不会改变。我希望能够根据手机高度设置离子项的大小，这样用户就不必滚动这个小项目列表。

我已尝试在列表属于其中的离子内容中设置scroll="false"，但仍会显示滚动条。

链接[此处在stackoverflow上] [1]建议使用ng-style="{'line-height': '250px'}"但是为每个项目单独设置它不是一个好主意我猜？有没有更好的解决方法来解决这个问题？

 <ion-view view-title="{{deployementName}}">

<ion-nav-buttons side="right">
<button class="button button-default"  ng-click="opendateModal()">{{startDate}}</button>

<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons> 
<ion-nav-buttons side="left">
<a  class="button button-dark button-clear" ui-sref="Deployment"> <i class="icon ion-chevron-left icon-accessory"></i> </a>
</ion-nav-buttons>

<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced nav-title-slide-ios7">
</ion-nav-bar> 
<ion-content has-bouncing="false" scroll="false">
<ion-list>
<ion-item>
<h2>SaleSummary-Total</h2>
</ion-item>
<ion-item>
<h3>NetSale:</h3><br>
Rs.{{netAmount | number}}</ion-item>
<ion-item>
<h3>Gross Sale:</h3><br>
Rs.{{netAmount | number}}</ion-item>
<ion-item>
<h3>Discount:</h3><br>
Rs.{{discount | number}}
</ion-item>
<ion-item>
<h3> Total Bills:</h3><br>
{{billInfo.length}}
</ion-item>
<ion-item>
<h3> Avg Bills Per Sale:</h3><br>
Rs {{netAmount/billInfo.length| number:0}}
</ion-item>

</div>
    </div>
</ion-list>



<ion-slide-box  active-slide="myActiveSlide" show-pager="false"  on-slide-changed="slideHasChange($index)">
<ion-slide disable-scroll="true">
</ion-slide>
<ion-slide>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="right">
<header class="bar bar-header bar-royal">
  <h1 class="title">Menu</h1>
</header>
<ion-content class="has-header sidemenu">
<ion-list>
<ion-item nav-clear menu-close ng-click="logout()">
<i class="ion-person">
<button class="button-clear button-royal">Logout</button></i>
</ion-item>
<ion-item nav-clear menu-close href="#">
<i class="ion-person"></i>
<button class="button-clear button-positive">Help</button>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

</ion-view>-image

Answer 1

您需要定义两个css类，以使总内容大小为标题下屏幕的100％并且每个项目的大小相等：

.content-with-full-height{
  height: 100%;
}

.equal-sized-item{
  height: *set value in percentage for each item, i.e for 6 items will be 100/6 = 16.7%*
}

将content-with-full-height课程添加到<ion-content>和<ion-list>，以便两者都获得100％的网页长度。并为每个equal-sized-item添加item类。

更改离子项的高度以使其适合屏幕而不滚动

1 个答案: