work hard work smart

专注于Java后端开发。 不断总结,举一反三。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Ionic slides 轮播图

Posted on 2017-11-25 21:03  work hard work smart  阅读(1322)  评论(0编辑  收藏  举报

1. 创建界面

<ion-content>
  <ion-slides pager class="myslides">
    <ion-slide>
      <img src="assets/images/slide01.png" />
    </ion-slide>
    <ion-slide>
      <img src="assets/images/slide02.png" />
    </ion-slide>
    <ion-slide>
      <img src="assets/images/slide03.jpg" />
    </ion-slide>
  </ion-slides>
</ion-content>

  

2. 创建样式

page-my-slides {
 .myslides{
   height:150px;
   width: 100%;
    ion-slide{
      height:150px;
      width: 100%;

      img{
        height:150px;
        width: 100%;
      }
    }
 }
}

  这样轮播图就会显示在顶部了。