报备

src/pages/myReport/myReport.html

@@ -5,8 +5,9 @@
 	<div class="pageMenuSlides">
 		<div class="swiper-container">
 			<div class="swiper-wrapper">
-				<div class="swiper-slide {{i==0?'bottomLine':''}}" *ngFor="let item of menus;let i=index;" tappable (click)="selectPageMenu(i)">{{item}}
-					<span *ngIf="i==0" class="menu-index">{{allReport.length}}</span>
+				<div class="swiper-slide" *ngFor="let item of menus;let i=index;" tappable (click)="selectPageMenu(i)">
+					<span class=" {{swiperIndex == i? 'swiper-title':''}} ">{{item}}</span>
+					<span *ngIf="i==0" class="menu-index" style="right: 14%;">{{allReport.length}}</span>
 					<span *ngIf="i==1" class="menu-index">{{processingReport.length}}</span>
 					<span *ngIf="i==2" class="menu-index">{{endReport.length}}</span>
 				</div>
@@ -15,9 +16,8 @@
 	</div>
 </ion-header>
 <ion-content >
-	<ion-slides #contentSlides (ionSlideDidChange)="slideChanged()">
-		<ion-slide>
-			<ion-content direction="y" scrollbar-y="true" class="bgc-e7e8ed">
+
+			<ion-content *ngIf="swiperIndex == 0" direction="y" scrollbar-y="true" class="bgc-e7e8ed">
 				<ion-list>
 					<ion-item *ngFor="let report of allReport">
 						<div class="item">
@@ -119,10 +119,8 @@
 					</ion-item>
 				</ion-list>
 			</ion-content>
-		</ion-slide>
 
-		<ion-slide>
-			<ion-content class="bgc-e7e8ed" direction="y" scrollbar-y="true">
+			<ion-content *ngIf="swiperIndex == 1" class="bgc-e7e8ed" direction="y" scrollbar-y="true">
 				<ion-list>
 					<ion-item *ngFor="let report of processingReport">
 						<div class="item">
@@ -166,10 +164,8 @@
 					</ion-item>
 				</ion-list>
 			</ion-content>
-		</ion-slide>
 
-		<ion-slide>
-			<ion-content class="bgc-e7e8ed" direction="y" scrollbar-y="true">
+			<ion-content *ngIf="swiperIndex == 2" class="bgc-e7e8ed" direction="y" scrollbar-y="true">
 				<ion-list>
 					<ion-item *ngFor="let report of endReport">
 						<div class="item">
@@ -223,6 +219,5 @@
 					</ion-item>
 				</ion-list>
 			</ion-content>
-		</ion-slide>
-	</ion-slides>
+
 </ion-content>
\ No newline at end of file

src/pages/myReport/myReport.scss

@@ -29,12 +29,15 @@ page-myReport {
     }
 
     .menu-index{
-        padding: 2px 6px;
+        position: absolute;
+        top: 6px;
+        padding: 0px 4px;
         border-radius: 10px;
         background-color: #f36c35;
-        font-size: 14px;
+        font-size: .5rem;
         color: white;
         margin-left: 5px;
+        right: 18%;
         text-align: center;
         line-height: 1.4rem;
     }

src/pages/myReport/myReport.ts

@@ -22,6 +22,7 @@ declare var Swiper;
 
 export class MyReportPage {
 
+    swiperIndex = 0;
   swiper: any;
   allReport: Array<any> = [];
   processingReport: Array<any> = [];
@@ -81,9 +82,9 @@ export class MyReportPage {
   }
   //选择菜单  
   selectPageMenu(index) {
-    this.setStyle(index);
+      this.swiperIndex = index;
     //切换页面  
-    this.contentSlides.slideTo(index);
+    // this.contentSlides.slideTo(index);
   }
   //选择菜单之后设置菜单样式  
   setStyle(index) {