在移动中使用离子水平滚动卡

Question

我只是从离子开始。我正在尝试使用Ionic水平滚动卡。看起来像这样，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>标签。

Answer 1

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

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

.scroll{
    height:100%
}

CodePen

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

ion-scroll

Answer 2

离子滚动支持水平滚动。

使用

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

替换你的代码

<hscroller></hscroller>