Ionic4实现手机滑动答题页面---轮播图切换设计

本文主要是介绍Ionic4实现手机滑动答题页面---轮播图切换设计，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

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

概述

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

<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项目加入这样的一个动态效果试试.荣幸与您分享~

这篇关于Ionic4实现手机滑动答题页面---轮播图切换设计的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---