前言

     接着上篇标签切换的实现咱们接着来看一个实际的应用.这是一个需要实现在手机端实现切换显示多个轮播图标签的应用需求.

概述

     当用户进入页面后会默认显示一类题型,当点击按钮时根据需要切换到另一组轮播图给用户使用.在页面上代码设计如下:

<ion-card class="cardexam" >

<!--  使用ng-container容器,在一个标签中使用多个*ng命令 --> 
<!--  使用*ngFor循环生成多个轮播图组件 -->
    <ng-container *ngFor="let qt of exampaper">
    
    <!--  使用*ngIf控制轮播组件的切换显示 -->
        <div class="question_type"  *ngIf="questionTypes == qt.questionCode" [ngSwitch]="qt.id">
            <ion-slides >
                <ion-slide *ngFor="let q of qt.questionMainModelList; let i=index">
                      <div [ngSwitch]="qt.questionCode">
                      <!--  生成单选题模块 -->         
                            <div *ngSwitchCase="1">
                                ......
                                ......
                             </div>
                        </div>
                    <!--  生成判断题模块 -->
                        <div *ngSwitchCase="2">
                                ......
                                ......
                        </div>
                    </div>
                </ion-slide>
            </ion-slides>
        </div>
    </ng-container>
</ion-card>

小结

     一个小功能的实现,只是将自己想到的效果一点点实现出来,最终的滑动及切换效果还是令人满意的,大家一个也可以在App项目加入这样的一个动态效果试试.荣幸与您分享~