Ionic slides 轮播图

最新推荐文章于 2019-07-26 18:17:44 发布

转载最新推荐文章于 2019-07-26 18:17:44 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/358150

本文介绍如何使用Ionic框架创建轮播图组件，并提供详细的代码示例。通过设置样式，可以使轮播图显示在页面顶部。

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

      }

    }

 }
}