滚动离子列表中的换行文本

Question

我一直在处理具有可滚动内容的列表，但是经过几次测试，我发现scollbar仅考虑图像，而不考虑包裹大小的文本。 这会导致页面底部的内容被截断。

这是我的代码：

<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> 指令一起使用 。

<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>

这是工作示例 。