Ionic 2：将屏幕拆分为两个独立部分

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> 

它是否帮助？