IONIC2/3 ion-slide 踩坑指南

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IONIC2/3 ion-slide 踩坑指南相关的知识,希望对你有一定的参考价值。

参考技术A 1.动态生成 ion-slide 报错 

原因:页面渲染完成时,接口尚未完成取值,所以页面的 banners 为 undefined

解决方案

html:

<ion-slides *ngIf="banners?.length > 1" autoplay="4000" loop="true" class="height-200">

      <ion-slide*ngFor="let banner of banners">

        <img style="width:100%"  [src]="FILE_SERVE_URL+banner.imgUrl">

      </ion-slide>

    </ion-slides>

2.手动出发ion-slide 滚动后 autoplay 属性失效

加上:this.slides.autoplayDisableOnInteraction = false; 即可

如果是从接口获取的slide,则需要加一个setTimeout()方法延时调用该属性,否则会报错slides is not define

3.切换页面时导致轮播失效

ionViewDidEnter()中加上:this.slides.startAutoplay();

ionViewWillLeave()中加上:this.slides.stopAutoplay();

如果是接口获取的slide,同上添加setTimeout()方法延时加载

如何在 Ionic 4 中每 10 秒后移动 Ion-Slides?

【中文标题】如何在 Ionic 4 中每 10 秒后移动 Ion-Slides?【英文标题】:How to move Ion-Slides next after every 10 second in Ionic 4? 【发布时间】:2019-10-10 22:39:37 【问题描述】:

我正在创建 Ionic 4 plus Angular 应用程序。在那我正在使用 Ion-Slides 来一一显示问题的数量。现在我想每隔 10 秒移动一次 Ion-Slides。

Ionic Slides Documentation

【问题讨论】:

【参考方案1】:

这是离子4的解释

html.

   <ion-slides  [options]="slideOpts"  > 
          <ion-slide *ngFor="let item of cars">
            <img src="item"  >
          </ion-slide>
   </ion-slides>

.ts

import  Component, ViewChild  from '@angular/core';
import IonSlides from '@ionic/angular';
export class HomePage 
     @ViewChild(IonSlides) slides: IonSlides;

cars=[
"https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52648.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Front-Three-Quarter-52645.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Side-52646.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Left-Front-Three-Quarter-52647.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52649.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Rear-view-52650.jpg?v=201711021421&q=80"

];




ngOnInit()
  this.slides.startAutoplay().then(()=>)

 slideOpts = 
   speed: 10000
  ;

您可以使用 ViewChild 获取组件,然后您可以在页面初始化时使用其方法。您链接的文档中提到了startAutoplay()。幻灯片选项允许您设置过渡的速度。如果您想要一个真正的解决方案,即每 10 秒翻转一次幻灯片,您可以编写一个每 10 秒更改一次幻灯片的异步方法。如果您需要帮助,请发表评论。

【讨论】:

嗨,基本上我在每张幻灯片上都有问题,并且每次更换幻灯片时都使用倒数计时器 10 秒。 但是 10 秒后一张幻灯片移动到下一张,(角度 6 倒计时)倒计时计时器未重新启动。我遇到了这个问题。【参考方案2】:

你可以这样做,

.html

<ion-slides  #slid autoplay="5000" loop="true" speed="500" pager="true"  > 
          <ion-slide *ngFor="let item of cars">
            <img src="item"  >
          </ion-slide>
        </ion-slides>

.ts

import  Component, OnInit, ViewChild  from '@angular/core';

import  Platform  from 'ionic-angular';

import  TabsPage  from '../pages/tabs/tabs';




@Component(
  templateUrl: 'app.html'
)
export class MyApp 
  rootPage:any = TabsPage;


cars=[
"https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52648.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Front-Three-Quarter-52645.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Side-52646.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Left-Front-Three-Quarter-52647.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52649.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Rear-view-52650.jpg?v=201711021421&q=80"

];



这里是 stackblitz 链接 [https://stackblitz.com/edit/ionic-8qkwca]

【讨论】:

您好先生,鉴于 Stackblitz 链接未打开。 这不是ionic 3的解释吗? 这也可以,但我需要离子 4。谢谢。

以上是关于IONIC2/3 ion-slide 踩坑指南的主要内容,如果未能解决你的问题,请参考以下文章

ionic2踩坑之ionic build android报错

ionic2 使用slides制作滑动效果的类型选择栏

Ionic2 显示多张幻灯片。或者它的一部分

离子幻灯片样式宽度自动设置

Laya踩坑003_所谓的vsCode调试/f5调试

Laya踩坑002_Mac编译后报错file://跨域问题