在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ ionic3中 輪播自動切換效果圖片顯示不出來是什么問題

ionic3中 輪播自動切換效果圖片顯示不出來是什么問題

html:
<ion-slides pager autoplay="600" speed="800" loop="true" autoplayDisableOnInteration="true">

<ion-slide>
  <img src="assets/img/banner.jpg"/>
</ion-slide>
<ion-slide>
  <img src="assets/img/2.png" />
</ion-slide>

</ion-slides>

ts:
import { Component, Input, ElementRef, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

export class HomePage {

@ViewChild(Slides) slides: Slides;

ionViewWillEnter(){

this.slides.startAutoplay();

}

ionViewWillLeave(){

 this.slides.stopAutoplay();

}
}

sass:
ion-slides {

    width:100%;
    height:pxToRem(375);
   // border:1px solid #f00;
    ion-slide {
        width:100%;
        height:pxToRem(375);
       // border:1px solid blue;
        img {
            width:100%;
          //  border:1px solid #333;
        }   
    }
}
回答
編輯回答
荒城

這個自帶的輪播插件有個很奇怪的問題，圖片如果從本地加載的話是可以加載出來的，但是如果是從后臺接口動態(tài)獲取的，圖片就加載不出來 ，必須判斷是否從后臺接口里獲取到了img數(shù)據(jù)列表才能顯示就是這個判斷*ngIf="len>1"
<ion-slides *ngIf="len>1" #Slides pager autoplay="1000" speed="600" (ionSlideAutoplayStop)="auto()" loop="true" autoplayDisableOnInteration="true">

     <ion-slide  *ngFor="let sl of banner">
        <div class =“swiper-zoom-container”>
            <img src="{{sl.imageUrl}}">
        </div>
    </ion-slide> 
</ion-slides>     

//頁面進(jìn)入的時候開啟自動播放（這里也要做判斷ngIf="len>1",不然會報startAutoplay（）函數(shù)未定義），以下情況也是一樣的
 ionViewDidEnter(){
 this.flag = false;
 if(this.len>1){
    this.slides.startAutoplay();
}

}

//頁面離開的的時候停止自動播放
ionViewDidLeave(){

 this.flag = true;
 if(this.len>1){
   this.slides.stopAutoplay();
 }

}

  
//這個方法就是用戶操作過輪播圖之后，自動播放的效果就停止了，起到監(jiān)聽停止自動播放的事件，然后開啟自動播放

auto(){

if(this.len>1){
  if(!this.flag){
    this.slides.startAutoplay();
  }
}
2018年2月6日 02:34