ionic2轮播图实现，以及在轮播图上加搜索框或者标题

先看代码：

正常情况下用ngFor循环出每一项。eg：注释部分

[pager]="true"显示底部轮播顺序的小圆点，[loop]=“true” 循环播放  autoplay="3000”每隔几秒播放一张

<div class="slides">    <ion-slides class="slide"  [pager]="true" [loop]="true" autoplay="3000" >        <!--<ion-slide *ngFor="let slide of slides">-->        <!--<a (click)="bannerDetail(slide)">-->        <!--<img src="{{slide.PicUrl}}">-->        <!--</a>-->        <!--</ion-slide>-->        <ion-slide >            <a (click)="bannerDetail(slide)">                <img src="./assets/page404/page404.png">            </a>        </ion-slide>        <ion-slide >            <a (click)="bannerDetail(slide)">                <img src="./assets/page404/page404.png">            </a>        </ion-slide>        <ion-slide >            <a (click)="bannerDetail(slide)">                <img src="./assets/page404/page404.png">            </a>        </ion-slide>    </ion-slides></div>

参考文档：https://ionicframework.com/docs/api/components/slides/Slides/

最后是在轮播的图片上实现搜索框或者标题

在轮播div里面加一个盒子，然后用绝对定位定上去就好了。最后用z-index设置始终显示在最顶部即可

下面是我借鉴的一段代码，自己实现的涉及公司机密，所有借鉴他人的了

html代码

 <div class="articleHeader">      <div class="search">        <ion-item ui-sref="tabsController.searchPage" id="articlePage-button10" class="item"                  style="opacity:0.7;background-color: #374953;border-radius: 40px;height: 32px;width: 70%;margin-left:15%">          <i class="ion-search" style="padding-left: 5px"></i>          <i style="padding-left: 15px">请输入关键字进行查询</i>        </ion-item>      </div>      <div class="coverFlow" style="background-color: #0a9dc7">        <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true"                       slide-interval=2000 show-pager="true" pager-click="pageClick(index)"                       active-slide="model.activeIndex" delegate-handle="delegateHandler" ng-click="coverFlowClick()">          <ion-slide>            <div class="box">              <img src="http://img9.tu11.com:8080/picture/121022/pic5/14.jpg">            </div>          </ion-slide>          <ion-slide>            <div class="box">              <img src="http://down77.yousiji.com/uploads1/allimg/c101123/12Z4Qc10S10-193502.jpg">            </div>          </ion-slide>          <ion-slide>            <div class="box">              <img src="http://img.mm522.net/flashAll/20120206/13285185634aUfhU.jpg">            </div>          </ion-slide>        </ion-slide-box>      </div>    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

css代码

.articleHeader {  position: relative;  width: 100%;  height: 200px;}.articleHeader .search {  position: absolute;  z-index: 3;  width: 100%;  height: 32px;  left: 0px;  top: 0px;}.articleHeader .coverFlow {  position: absolute;  z-index: 2;  width: 100%;  height: 100%;  left: 0px;  top: 0px;}