1.轮播图
slides,官网引入代码
<ion-slides pager loop="true" autoplay="3000"> <ion-slide> <h1>Slide 1</h1> <!-- <img src="">把h1换成img,就是轮播图了 --> </ion-slide> <ion-slide> <h1>Slide 2</h1> </ion-slide> <ion-slide> <h1>Slide 3</h1> </ion-slide> </ion-slides>
pager表示显示轮播图下标
loop 自动轮播
autoplay 轮播间隔时间
再加一下样式,让轮播图置顶
ion-slides{ 100%; height: 120px; ion-slide{ 100%; height: 120px; } }
效果:
3.横向长框
期望效果: