Slides

优质
小牛编辑
129浏览
2023-12-01

Slides是基于Swiper.js实现的。

  1. @Page({
  2. template: `
  3. <ion-slides pager (change)="onSlideChanged($event)" (move)="onSlideMove($event)">
  4. <ion-slide>
  5. <h3>Thank you for choosing the Awesome App!</h3>
  6. <p>
  7. The number one app for everything awesome.
  8. </p>
  9. </ion-slide>
  10. <ion-slide>
  11. <h3>Using Awesome</h3>
  12. <div id="list">
  13. <h5>Just three steps:</h5>
  14. <ol>
  15. <li>Be awesome</li>
  16. <li>Stay awesome</li>
  17. <li>There is no step 3</li>
  18. </ol>
  19. </div>
  20. </ion-slide>
  21. <ion-slide>
  22. <h3>Any questions?</h3>
  23. </ion-slide>
  24. </ion-slides>
  25. `
  26. })

输入

属性名称类型描述
pagerboolean是否显示索引点
optionsany任何Slider需要配置的参数,可以参考http://www.idangero.us/swiper/api/
zoomnumber该组件是否可以缩放
zoomDurationnumber缩放该组件需要多长时间
zoomMaxnumber最大的缩放

输出事件

  • change

    当滑块变化的时候触发

  • slideChangeStart

    当滑块开始更改时触发

  • move

    当滑块移动时触发