离子2:将屏幕分成两个独立的部分

本文介绍了离子2:将屏幕分成两个独立的部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想创建一个页面，该页面分为两个部分(上部和下部)，并且我想在两个部分上都显示项目(为简单起见，列出条目)，并且每次单击该项目时我都希望它移至屏幕的另一部分. 考虑到未来，我希望这两部分都可以滚动.

I would like to create a page that would be divided into two (upper and lower) and I want to display items (for simplicity - list entries) on both parts and every time item will be clicked I want it to move to the other part of the screen. Thinking about the future I want that both parts would be scrollable.

是否有一种使用离子成分实现这种行为的方法?

Is there a way to achieve such behaviour using ionic components?

谢谢.

推荐答案

我尚未测试以下代码，但我认为这可以工作并满足您的需求.

I have not tested the following code but I think this would work and answers your need.

在页面控制器中(例如HomePage):

In your page controller (for instance HomePage) :

export class HomePage { top_item_array = ["Item A", "Item B", "Item C"] bottom_item_array = ["Item D", "Item E", "Item F"] constructor(){ } move_from_top_to_bottom(idx){ this.bottom_item_array.push(this.top_item_array[idx]) this.top_item_array.splice(idx, 1) } move_from_bottom_to_top(idx){ this.top_item_array.push(this.bottom_item_array[idx]) this.bottom_item_array.splice(idx, 1) } }

在模板的<ion-content>中:

<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>

有帮助吗?