html - 在 ion-list 中滚动换行文本

Question

我一直在研究具有可滚动内容的列表，但经过几次测试后，我发现滚动条仅考虑图像，而不考虑元素大小的换行文本。这会导致页面底部的内容被截断。

这是我的代码:

<ion-content ng-controller="categoriesCtrl" ng-switch on="categories.length > 0" has-bouncing="false">
  <ion-refresher on-refresh="updateCategories()">
  </ion-refresher>
  <div ng-switch-when="true">
    <ion-list type="card">
      <a class="item item-thumbnail-right item-text-wrap" href="#" ng-repeat="category in categories">
        <img ng-src="{{category.photo}}" />
        <h2>{{category.name}}</h2>
        <p class="item-text-wrap">{{category.description}}</p>
      </a>
    </ion-list>
  </div>
</ion-content>

这就是我得到的，无法进一步滚动

解决方案？

Answer 1

您似乎正在使用 <ion-list> 的组合带有列表 CSS 元素的指令。尝试使用 <ion-list>与 <ion-item> directive .

<ion-list>
  <ion-item class="item-text-wrap item-thumbnail-right">
    <img ng-src="{{category.photo}}" />
    <h2>Name</h2>
    <p>{{description}}</p>
  </ion-item>
  <ion-item class="item-text-wrap item-thumbnail-right">
    <img ng-src="{{category.photo}}" />
    <h2>Name</h2>
    <p>{{description}}</p>
  </ion-item>
</ion-list>

这是working demo .