Ionic2 离子2：将屏幕分为两个单独的部分

我想创建一个页面，将分为两部分（上部和下部），我想在这两部分上显示项目（为简单起见-列表条目），每次单击项目时，我希望它移动到屏幕的另一部分。 考虑到未来，我希望这两个部分都可以滚动

有没有一种方法可以通过使用离子成分来实现这种行为

---

谢谢。

我还没有测试以下代码，但我认为这可以满足您的需要

在页面控制器（例如

主页

）中：

在模板的

中：

<ion-scroll scrollX="true" scrollY="true" style="height: 100px;">
    <h2>Top</h2>
    <ion-list>
        <ion-item *ngFor="let item of top_item_array; let idx = index" (tap)="move_from_top_to_bottom(idx)">
            {{item}}
        </ion-item>
    </ion-list>
</ion-scroll>
<ion-scroll scrollX="true" scrollY="true" style="height: 100px;">
    <h2>Bottom</h2>
    <ion-list>
        <ion-item *ngFor="let item of bottom_item_array; let idx = index" (tap)="move_from_bottom_to_top(idx)">
            {{item}}
        </ion-item>
    </ion-list>
</ion-scroll>

顶部
{{item}}
底部
{{item}}

---

这有帮助吗？

我还没有测试以下代码，但我认为这可以满足您的需要

在页面控制器（例如

主页

）中：

在模板的

中：

<ion-scroll scrollX="true" scrollY="true" style="height: 100px;">
    <h2>Top</h2>
    <ion-list>
        <ion-item *ngFor="let item of top_item_array; let idx = index" (tap)="move_from_top_to_bottom(idx)">
            {{item}}
        </ion-item>
    </ion-list>
</ion-scroll>
<ion-scroll scrollX="true" scrollY="true" style="height: 100px;">
    <h2>Bottom</h2>
    <ion-list>
        <ion-item *ngFor="let item of bottom_item_array; let idx = index" (tap)="move_from_bottom_to_top(idx)">
            {{item}}
        </ion-item>
    </ion-list>
</ion-scroll>

顶部
{{item}}
底部
{{item}}

它有用吗？

太好了

style=“height:100px；”“

帮了我的忙。谢谢。很高兴这有帮助；）！太好了

style=“height:100px；”“

帮了我的忙。谢谢。很高兴这有帮助；）！