学习测试

src/directives/directives.module.ts

+import { NgModule } from '@angular/core';
+import { TabsSlidesDirective } from './tabs-slides/tabs-slides';
+@NgModule({
+	declarations: [TabsSlidesDirective],
+	imports: [],
+	exports: [TabsSlidesDirective]
+})
+export class DirectivesModule {}

src/directives/tabs-slides/tabs-slides.ts

+import {Directive, ElementRef, HostListener, Input} from '@angular/core';
+
+@Directive({
+  selector: '[tabs-slides]' // Attribute selector
+})
+export class TabsSlidesDirective {
+  @Input('tabs-slides') index:Number;
+
+  screenWidth = window.screen.width;
+  constructor(public el:ElementRef) {
+      console.log(this.el)
+      console.log(this.index)
+  }
+
+  @HostListener('click')
+  click(){
+
+    console.log('directive:'+this.index)
+  }
+
+}

src/pages/home/learning/learning-do/learning-do.html

+<!--测试页面-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>学习测试</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+</ion-content>

src/pages/home/learning/learning-do/learning-do.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { LearningDoPage } from './learning-do';
+
+@NgModule({
+  declarations: [
+    LearningDoPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(LearningDoPage),
+  ],
+})
+export class LearningDoPageModule {}

src/pages/home/learning/learning-do/learning-do.scss

+page-learning-do {
+
+}

src/pages/home/learning/learning-do/learning-do.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+@IonicPage()
+@Component({
+  selector: 'page-learning-do',
+  templateUrl: 'learning-do.html',
+})
+export class LearningDoPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad LearningDoPage');
+  }
+
+}

src/pages/home/learning/learning-explain/learning-explain.html

+<ion-header>
+
+  <ion-navbar>
+    <ion-title>测试说明</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <p class="text-center">本次答题共计10题，满分100分，限时五分钟</p>
+  <button class="submit-btn submit" (click)="goToDO()">开始答题</button>
+
+</ion-content>

src/pages/home/learning/learning-explain/learning-explain.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { LearningExplainPage } from './learning-explain';
+
+@NgModule({
+  declarations: [
+    LearningExplainPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(LearningExplainPage),
+  ],
+})
+export class LearningExplainPageModule {}

src/pages/home/learning/learning-explain/learning-explain.scss

+page-learning-explain {
+
+  .submit{
+    margin-top: 20px;
+    border: 1px solid #34b4fc;
+    background-color: #34b4fc;
+  }
+
+}

src/pages/home/learning/learning-explain/learning-explain.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import {LearningDoPage} from "../learning-do/learning-do";
+
+@IonicPage()
+@Component({
+  selector: 'page-learning-explain',
+  templateUrl: 'learning-explain.html',
+})
+export class LearningExplainPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad LearningExplainPage');
+  }
+
+  //跳转答题页面
+    goToDO(){
+      this.navCtrl.push("LearningDoPage")
+    }
+
+}

src/pages/home/learning/learning-list/learning-list.html

+<ion-header>
+  <ion-navbar>
+    <ion-title>测试列表</ion-title>
+  </ion-navbar>
+</ion-header>
+
+
+<ion-content>
+  <div class="tabs-parent">
+    <div *ngFor="let item of tabsList;let i = index" (click)="change(i)" class="tabs-children" >{{item.name}}</div>
+    <span #tips id="tips"></span>
+  </div>
+    <span (click)="goDo()">测试</span>
+    <span (click)="goResult()">测试结果</span>
+  <ion-slides  (ionSlideDidChange)="slideChanged()">
+    <ion-slide>
+        <ion-list>
+            <ng-container *ngFor="let item of allList" >
+                <ion-item class="item-list margin-bottom-10" >
+                    <div class="item" (click)="goToResult(item)">
+                        <div class="item-header padding-15-0">
+                            <div class="item-header-style">
+                                <span class="item-title">{{item.title}}</span>
+                                <span float-right class="done">已完成</span>
+                            </div>
+                        </div>
+                        <div class="content-button padding-15-0">
+                            <span>参与人员:</span>
+                            <span *ngIf="item.groupName">{{item.groupName}}</span>
+                            <span *ngIf="!item.groupName">全体人员</span>
+                            <span float-right class="look">查看</span>
+                        </div>
+                    </div>
+                </ion-item>
+            </ng-container>
+            <ng-container *ngIf="doList.length == 0">
+                <ion-list text-center style="margin-top: 10rem" >
+                    <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
+                    <p text-center>
+                        暂无测试
+                    </p>
+                </ion-list>
+            </ng-container>
+        </ion-list>
+    </ion-slide>
+    <ion-slide>
+        <ion-list>
+            <ng-container *ngFor="let item of noList" >
+                <ion-item class="item-list margin-bottom-10" >
+                    <div class="item" (click)="goToResult(item)">
+                        <div class="item-header padding-15-0">
+                            <div class="item-header-style">
+                                <span class="item-title">{{item.title}}</span>
+                                <span float-right class="done">已完成</span>
+                            </div>
+                        </div>
+                        <div class="content-button padding-15-0">
+                            <span>参与人员:</span>
+                            <span *ngIf="item.groupName">{{item.groupName}}</span>
+                            <span *ngIf="!item.groupName">全体人员</span>
+                            <span float-right class="look">查看</span>
+                        </div>
+                    </div>
+                </ion-item>
+            </ng-container>
+            <ng-container *ngIf="doList.length == 0">
+                <ion-list text-center style="margin-top: 10rem" >
+                    <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
+                    <p text-center>
+                        暂无测试
+                    </p>
+                </ion-list>
+            </ng-container>
+        </ion-list>
+    </ion-slide>
+    <ion-slide>
+        <ion-list>
+            <ng-container *ngFor="let item of doList">
+                <ion-item class="item-list margin-bottom-10" >
+                    <div class="item" (click)="goToResult(item)">
+                        <div class="item-header padding-15-0">
+                            <div class="item-header-style">
+                                <span class="item-title">{{item.title}}</span>
+                                <span float-right class="done">已完成</span>
+                            </div>
+                        </div>
+                        <div class="content-button padding-15-0">
+                            <span>参与人员:</span>
+                            <span *ngIf="item.groupName">{{item.groupName}}</span>
+                            <span *ngIf="!item.groupName">全体人员</span>
+                            <span float-right class="look">查看</span>
+                        </div>
+                    </div>
+                </ion-item>
+            </ng-container>
+            <ng-container *ngIf="doList.length == 0">
+                <ion-list text-center style="margin-top: 10rem" >
+                    <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
+                    <p text-center>
+                        暂无测试
+                    </p>
+                </ion-list>
+            </ng-container>
+        </ion-list>
+    </ion-slide>
+  </ion-slides>
+</ion-content>

src/pages/home/learning/learning-list/learning-list.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { LearningListPage } from './learning-list';
+import {DirectivesModule} from "../../../../directives/directives.module";
+
+@NgModule({
+  declarations: [
+    LearningListPage,
+  ],
+  imports: [
+      DirectivesModule,
+    IonicPageModule.forChild(LearningListPage),
+  ],
+})
+export class LearningListPageModule {}

src/pages/home/learning/learning-list/learning-list.scss

+page-learning-list {
+
+}

src/pages/home/learning/learning-list/learning-list.ts

+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {IonicPage, NavController, NavParams, Slides} from 'ionic-angular';
+import {LearningDoPage} from "../learning-do/learning-do";
+import {LearningResultPage} from "../learning-result/learning-result";
+import {LearningExplainPage} from "../learning-explain/learning-explain";
+
+
+@IonicPage()
+@Component({
+    selector: 'page-learning-list',
+    templateUrl: 'learning-list.html',
+})
+export class LearningListPage {
+    @ViewChild(Slides) slides: Slides;
+    @ViewChild('tips') tips:ElementRef;
+
+    index;
+    tabsList = [
+        {name:"全部",},
+        {name:"未完成",},
+        {name:"已完成",}
+    ];
+    allList = [];
+    noList = [];
+    doList = [];
+
+    constructor(public navCtrl: NavController, public navParams: NavParams) {
+    }
+
+    ionViewDidLoad() {
+        let itemWidth = window.screen.width /3;
+        this.tips.nativeElement.style.left = itemWidth / 2 - this.tips.nativeElement.offsetWidth / 2 + 'px';
+    }
+
+    change(index) {
+
+        let itemWidth = window.screen.width /3;
+        // 自身div的一半 - 滑块的一半
+        this.tips.nativeElement.style.left = itemWidth * index + itemWidth / 2 - this.tips.nativeElement.offsetWidth / 2 + 'px';
+        this.slides.slideTo(index)
+        this.index = index;
+    }
+
+    //
+    slideChanged(){
+        this.index = this.slides.getActiveIndex();
+        if(this.index < 3){
+            let itemWidth = window.screen.width /3;
+            // 自身div的一半 - 滑块的一半
+            this.tips.nativeElement.style.left = itemWidth * this.index + itemWidth / 2 - this.tips.nativeElement.offsetWidth / 2 + 'px';
+        }
+    }
+
+    //测试
+    goDo(){
+        this.navCtrl.push("LearningExplainPage")
+    }
+
+    //测试结果
+    goResult(){
+        this.navCtrl.push("LearningResultPage")
+    }
+
+
+}

src/pages/home/learning/learning-result/learning-result.html

+<!--测试结果-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>测试结果</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+</ion-content>

src/pages/home/learning/learning-result/learning-result.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { LearningResultPage } from './learning-result';
+
+@NgModule({
+  declarations: [
+    LearningResultPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(LearningResultPage),
+  ],
+})
+export class LearningResultPageModule {}

src/pages/home/learning/learning-result/learning-result.scss

+page-learning-result {
+
+}

src/pages/home/learning/learning-result/learning-result.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the LearningResultPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-learning-result',
+  templateUrl: 'learning-result.html',
+})
+export class LearningResultPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad LearningResultPage');
+  }
+
+}