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;
}