`

ionic2 + cordova 应用-轮播图

阅读更多

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();
  }

 

 

 



 

  • 大小: 421.4 KB
  • 大小: 425 KB
分享到:
评论

相关推荐

    ionic学习记录总结

    如果你的应用需要轮播图功能,可以考虑使用slick-carousel这个库。安装方法如下: ```bash npm install jquery --save npm install slick-carousel ``` **2. 安装videogular2:** 为了支持视频播放功能,可以使用...

    ionic samples

    2. 示例应用:通过 `ionic-demo-gh-pages` 了解实际代码结构和用法。 3. 在线课程:各种在线教育平台提供 Ionic 开发课程,帮助初学者快速上手。 4. 社区支持:参与 Ionic 论坛和 Stack Overflow,获取问题解答和...

    ionic的15个demo和一个真实项目

    2. **demo03**:侧滑菜单,演示了如何在 Ionic 应用中实现可滑动的侧边菜单,这对于多层级的导航非常有用。 3. **demo05**:滚动和无限滚动,展示了如何处理内容滚动,并实现无限滚动加载更多数据,这对于内容丰富...

    ionic-slide-sample

    Ionic 是一个流行的开源框架,用于构建混合移动应用,它利用 HTML5、CSS 和 JavaScript 技术,结合 Cordova 或 Capacitor 实现原生移动功能。 【描述】提到的“离子视图”(Ionic Views)在这里可能是指 Ionic 的...

    IonicCarouselDemo:该存储库中有一个Ionic轮播演示

    本文将深入探讨“IonicCarouselDemo”项目,它是一个基于 Ionic 的轮播演示,展示了如何在 Ionic 应用中实现动态、交互式的轮播效果。我们将围绕JavaScript编程语言,讲解该项目的核心知识点,并探讨其在实际开发中...

    使用ionic播放轮询广告的实现方法(必看)

    这个组件是 Ionic 专门为创建滑动内容而设计的,非常适合用来展示轮播图或广告。在给定的代码示例中,我们看到`ion-slide-box`被用来创建一个包含多个广告图片的滑动容器。 ```html &lt;ion-slide-box on-slide-...

    inoic完整项目

    Swiper是一个流行的触摸滑动插件,常用于实现轮播图、幻灯片等效果。在Ionic项目中,Swiper库可能被用来创建动态、交互式的组件,比如产品展示或用户反馈。 总的来说,【inoic完整项目】是一个全面的教程,涵盖了...

    bootstrap-proj

    3. **组件**:包含导航条、按钮、模态框、下拉菜单、轮播图等多种UI组件。 4. **JavaScript插件**:例如折叠、滚动spy、轮播等,可以通过简单的数据属性或JavaScript方法启用。 5. **自定义**:允许开发者根据需求...

    大前端学习流程

    * JS基本特效:常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图 第二阶段:HTML5和移动Web开发 * HTML5:HTML5新语义标签、HTML5表单、音频和...

    businesscenter

    6. **移动应用开发**:通过React Native、Ionic、Cordova等工具,JavaScript可以用来开发原生移动应用。 7. **数据可视化**:D3.js、Chart.js等库可以让开发者用JavaScript创建各种图表,展示复杂数据。 回到...

Global site tag (gtag.js) - Google Analytics