Question

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

有没有办法使用离子成分来实现这种行为？

感谢。

Answer 1

我没有测试过以下代码，但我认为这样可以解决您的需求。

在您的页面控制器中（例如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：将屏幕分成两个独立的部分

1 个答案: