前言
接着上篇标签切换的实现咱们接着来看一个实际的应用.这是一个需要实现在手机端实现切换显示多个轮播图标签的应用需求.
概述
当用户进入页面后会默认显示一类题型,当点击按钮时根据需要切换到另一组轮播图给用户使用.在页面上代码设计如下:
<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项目加入这样的一个动态效果试试.荣幸与您分享~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/144253.html
