feat(tab3, tab4): 添加列表拖拽排序功能

book-app/src/app/tab3/tab3.page.html

@@ -7,11 +7,34 @@
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+  <ion-list>
+    <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+    <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+    <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+      <ion-item>
+        <ion-label> 小熊 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
+      <ion-item>
+        <ion-label> 小鱼 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> 小风</ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> 小特 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label> 小辉 </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+    </ion-reorder-group>
+  </ion-list>
 </ion-content>

book-app/src/app/tab3/tab3.page.ts

@@ -1,14 +1,36 @@
+import { IonList, IonItem, IonReorder } from '@ionic/angular/standalone';
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonLabel } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { IonReorderGroup } from '@ionic/angular/standalone';
+import { ItemReorderEventDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonReorder ,IonList,IonReorderGroup,IonItem,IonLabel  ,IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
 })
 export class Tab3Page {
   constructor() {}
+  items = [1, 2, 3, 4, 5,6];
+
+  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+    // Before complete is called with the items they will remain in the
+    // order before the drag
+    console.log('Before complete', this.items);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. Update the items variable to the
+    // new order of items
+    this.items = ev.detail.complete(this.items);
+
+    // After complete is called the items will be in the new order
+    console.log('After complete', this.items);
+  }
+
+  trackItems(index: number, itemNumber: number) {
+    return itemNumber;
+  }
 }

book-app/src/app/tab4/tab4.page.html

@@ -6,12 +6,26 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 4</ion-title>
-    </ion-toolbar>
-  </ion-header>
 
-  <app-explore-container name="Tab 4 page"></app-explore-container>
+
+
+
+<ion-content [fullscreen]="true">
+  <ion-list [inset]="true">
+    <ion-item>
+      <ion-label>设置</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>付费内容</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>我的收藏</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>意见反馈</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>联系客服</ion-label>
+    </ion-item>
+  </ion-list>
 </ion-content>

book-app/src/app/tab4/tab4.page.ts

@@ -1,14 +1,33 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonItem, IonList } from '@ionic/angular/standalone';
+import { IonReorder,IonHeader, IonToolbar, IonTitle, IonContent, IonLabel } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
-
+import { ItemReorderEventDetail } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-tab4',
   templateUrl: 'tab4.page.html',
   styleUrls: ['tab4.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonReorder,IonList, IonItem, IonLabel, IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
 })
 export class Tab4Page {
   constructor() {}
+  items = [1, 2, 3, 4, 5];
+  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+    // Before complete is called with the items they will remain in the
+    // order before the drag
+    console.log('Before complete', this.items);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. Update the items variable to the
+    // new order of items
+    this.items = ev.detail.complete(this.items);
+
+    // After complete is called the items will be in the new order
+    console.log('After complete', this.items);
+  }
+
+  trackItems(index: number, itemNumber: number) {
+    return itemNumber;
+  }
 }