Question

我在可滚动的离子内容中创建了几个水平滚动列表，如下所示：

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

经过一些搜索后，我发现这是与离线框架相关的错误。根据这个问题，对话https://github.com/driftyco/ionic/issues/2501该错误已得到修复，并将在下次更新离子时提供。

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

1 个答案: