10.1 轮播图官方文档(欢迎加入Q群一起学习讨论657185219)
10.2 使用html
<ion-header> <ion-navbar> <ion-title>slide-pic-demo</ion-title> </ion-navbar> </ion-header> <ion-content padding class="page-home"> <ion-slides #mySlider (ionSlideDidChange)="slideChanged()"> <ion-slide *ngFor="let i of iterms"> <img src="{{i}}" > </ion-slide> </ion-slides> </ion-content>
ion-slides 标签就是我们的轮播组件, #mySlider组件对象ionSlideDidChange 表示每次轮播的回调事件
10.2 使用ts
import {Component,ViewChild} from '@angular/core'; import {NavController,Slides} from 'ionic-angular'; @Component({ templateUrl: 'slide-pic-demo.html' }) export class SlidePicDemoPage { @ViewChild('mySlider') sliders:Slides; iterms = [ "http://img3.imgtn.bdimg.com/it/u=1373023650,1548952065&fm=26&gp=0.jpg", "http://www.quanjing.com/image/2016index/slt3.jpg", "http://www.quanjing.com/image/2016index/f1.jpg" ]; constructor(public navCtrl: NavController) { } ngOnInit(){//页面加载完成后自己调用 //If true, show the pager. //能够显示下面的page的小点点 this.sliders.pager = true; //If true, continuously loop from the last slide to the first slide. //参照官网这个属性表示轮播图能够循环 this.sliders.loop = true; setInterval(()=>{ //1000:表示速度,true表示能够触发事件 this.sliders.slideNext(1000,true); },2000); } //轮播的时候触发的事件 slideChanged () { let currentIndex = this.sliders.getActiveIndex(); console.log('Current index is', currentIndex); } }
效果如下
10.3 补充
轮播图这样是可以正常播放,但是会出现一个问题,当页面跳转到其他页面再回来的时候轮播图就不自动播放了,解决方案如下。
this.sliders.loop = true; // 自定义播放的间隔,取消定时任务 this.sliders.autoplay = 1000; // 自定义播放的速度 this.sliders.speed = 1000; // 进入的时候自动播放 ionViewWillEnter() { this.sliders.startAutoplay(); } // 离开的时候暂停 ionViewWillLeave() { this.sliders.stopAutoplay(); }
相关推荐
如果你的应用需要轮播图功能,可以考虑使用slick-carousel这个库。安装方法如下: ```bash npm install jquery --save npm install slick-carousel ``` **2. 安装videogular2:** 为了支持视频播放功能,可以使用...
2. 示例应用:通过 `ionic-demo-gh-pages` 了解实际代码结构和用法。 3. 在线课程:各种在线教育平台提供 Ionic 开发课程,帮助初学者快速上手。 4. 社区支持:参与 Ionic 论坛和 Stack Overflow,获取问题解答和...
2. **demo03**:侧滑菜单,演示了如何在 Ionic 应用中实现可滑动的侧边菜单,这对于多层级的导航非常有用。 3. **demo05**:滚动和无限滚动,展示了如何处理内容滚动,并实现无限滚动加载更多数据,这对于内容丰富...
Ionic 是一个流行的开源框架,用于构建混合移动应用,它利用 HTML5、CSS 和 JavaScript 技术,结合 Cordova 或 Capacitor 实现原生移动功能。 【描述】提到的“离子视图”(Ionic Views)在这里可能是指 Ionic 的...
本文将深入探讨“IonicCarouselDemo”项目,它是一个基于 Ionic 的轮播演示,展示了如何在 Ionic 应用中实现动态、交互式的轮播效果。我们将围绕JavaScript编程语言,讲解该项目的核心知识点,并探讨其在实际开发中...
这个组件是 Ionic 专门为创建滑动内容而设计的,非常适合用来展示轮播图或广告。在给定的代码示例中,我们看到`ion-slide-box`被用来创建一个包含多个广告图片的滑动容器。 ```html <ion-slide-box on-slide-...
Swiper是一个流行的触摸滑动插件,常用于实现轮播图、幻灯片等效果。在Ionic项目中,Swiper库可能被用来创建动态、交互式的组件,比如产品展示或用户反馈。 总的来说,【inoic完整项目】是一个全面的教程,涵盖了...
3. **组件**:包含导航条、按钮、模态框、下拉菜单、轮播图等多种UI组件。 4. **JavaScript插件**:例如折叠、滚动spy、轮播等,可以通过简单的数据属性或JavaScript方法启用。 5. **自定义**:允许开发者根据需求...
* JS基本特效:常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图 第二阶段:HTML5和移动Web开发 * HTML5:HTML5新语义标签、HTML5表单、音频和...
6. **移动应用开发**:通过React Native、Ionic、Cordova等工具,JavaScript可以用来开发原生移动应用。 7. **数据可视化**:D3.js、Chart.js等库可以让开发者用JavaScript创建各种图表,展示复杂数据。 回到...