可滚动离子内容内的离子水平滚动

Question

我在可滚动的 ion-content 中创建了几个水平滚动列表，如下所示：

HTML

<ion-content>
      <div class="reps" ng-repeat="item in data">
            <div>{{item.title}}</div>
            <div class="images-list">
                <ion-scroll direction="x">
                    <div class="image"
                         ng-repeat="img in item.images">
                        <img ng-src="{{img}}">
                    </div>
                </ion-scroll>
            </div>
      </div>
</ion-content>

SCSS

.images-list{
    max-height: 120px;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    .image{
        display: inline-block;
        height: 120px;
        padding: 0 1px;
        img{
            width: auto;
            height: inherit;
        }
    }
}

显示效果很好，每个子列表都在水平滚动。

问题是，当我尝试滚动列表（离子内容的垂直滚动）时，它只能滚动子列表的外部，但不能滚动子列表内容。

任何帮助我如何实现从屏幕的任何区域滚动？

Answer 1

经过一番查找，发现这是一个与ionicframework相关的bug。根据这个问题的讨论 https://github.com/driftyco/ionic/issues/2501 该错误已修复，将在 ionic 的下一次更新中提供。

Answer 2

试试这个。

CSS
ion-content{
  white-space: nowrap;
}

<ion-content scroll-x="true">


</ion-content>

可滚动离子内容内的离子水平滚动

ionic horizontal scroll inside a scrollable ion-content

ionic-framework

ionic