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

有帮助吗?

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

相关推荐