使用离子在移动设备中使用水平滚动卡答案

【问题标题】：Using horizontal scroll cards in mobile using ionic使用离子在移动设备中使用水平滚动卡
【发布时间】：2017-12-25 05:39:46
【问题描述】：

我只是从离子开始。我正在尝试使用离子水平滚动卡。看起来是这样的，codepen：http://codepen.io/drewrygh/pen/jEJGLx

现在当我在具有这种结构的模板中使用它时：

<ion-view title="Videos">
    <ion-content>
            <hscroller>
                <hcard ng-repeat="item in items" index="{{$index}}" desc="{{item.desc}}" image="{{item.image}}"></hcard>
            </hscroller>
    </ion-content>
</ion-view>

但是滚动在移动设备上不起作用，在搜索时我发现 hscroller 元素应该放在离子窗格内。但是当我这样做时，列表会出现一微秒然后消失。我不知道为什么。代码笔：http://codepen.io/anon/pen/RWRzPj 这里我刚刚在 hscroller 周围添加了<ion-content> and <ion-pane> 标签。

【问题讨论】：

（注意：在查看 Codepen 示例时，必须使用 Chrome/Firefox DevTools 来模拟移动设备。）参考。 here.

标签： css angularjs ionic-framework ionic horizontal-scrolling

【解决方案1】：

为什么不使用带有水平滚动的<ion-scroll>。您可以使用它轻松创建水平卡片视图。

PS：您提供的最后一支代码笔。您需要添加

.scroll{
    height:100%
}

CodePen

虽然这并不能解决滚动问题，但我建议以上。

ion-scroll

【讨论】：

【解决方案2】：

ion-scroll 支持水平滚动。

使用

<ion-scroll direction="x" style="white-space: nowrap"></ion-scroll>

替换你的代码

<hscroller></hscroller>

【讨论】：