ionic3 轮播图不自动播放、切换页面以后再返回也不再自动播放

这几天在写一个b2b的app,然后发现首页轮播图不自动切换,然后各种网上找资料,终于解决了困扰我一生的问题。

home.html
<ion-slides *ngIf="slidess.length > 1" initialSlide="0" loop="true" autoplay="2300" speed="1000">
    <ion-slide *ngFor="let item of slidess">
      <img [src]="item.original_img"  (click)="goDetails(item)"/>
      <div class="cover"></div>
      <span class="title">{{item.goods_name}}</span>
    </ion-slide>
  </ion-slides>

这儿划重点:

*ngIf="slidess.length > 1"

判断一下轮播图是否有数据,我一开始没有判断,然后报错了。

其次在TypeScript中需要引入 ViewChild  Slides 

home.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, IonicPage, App,Slides } from 'ionic-angular';

然后在ts页面中声明:@ViewChild('slides')  slides; 并调用startAutoplay

export class HomePage { @ViewChild(Slides) slides: Slides; }

然后就是在ts页面中添加如下两个组件,一个是进入页面时,调用自动播放函数,一个是离开页面时暂停自动播放,这样就完美解决了离开当前页面进入其他页面,然后再返回当前页面是,轮播图就停止轮播的问题。

//进入页面时自动播放
  ionViewDidEnter(){
    if(this.slidess.length>1){
      this.slides.startAutoplay();
    }
    
  }

  //页面离开时停止自动播放
  ionViewDidLeave(){ 
    if(this.slidess.length>1){
      this.slides.stopAutoplay();
    }
  }

注意:调用startAutoplay时我依然判断了轮播图是否有数据,因为不判断会报:startAutoplay is undefield 的错误。具体原因我也不是很清楚。


第一次用ionic3+angular写app项目,很多地方都不懂,希望大家多多指教。



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值