Question

我正在研究离子2 我在阵列列表中有很多滑块，正在自动滑动。我需要从该列表中选择随机幻灯片，我怎么做？

*****************************************************
Your system information:

Cordova CLI: 6.4.0 
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.8 
OS: OS X Yosemite
Node Version: v6.2.2
Xcode version: Xcode 7.2 Build version 7C68
******************************************************

我有以下代码 - 的mypage.html -

<ion-slides #mySlider  [options]="mySlideOptions">
  <ion-slide *ngFor="let quote of slides">
    <div class="myslider">
        <div class="quote-container" [innerHTML]="quote.title"></div>
        <div [innerHTML]="quote.author" ></div>
     </div>
   </ion-slide>
</ion-slides>

page.ts--

slides: Slide[];
this.slides = [
      {id: 1,  author: "-Sanjay",     title: "my text goes here."},
      {id: 2,  author: "-Sanjay",     title: "my text goes here"},
      {id: 3,  author: "-Sanjay",     title: "my text goes here"},
      {id: 4,  author: "-Sanjay",     title: "my text goes here"}]

滑块的功能 -

// quotes slider
  mySlideOptions = {
    initialSlide: 0,
    loop: true,
    effect: 'fade',
    fade: {crossFade:true},
    autoplay:2700,
    autoplayDisableOnInteraction: true,
    direction:"horizontal",
    speed:4000,
    nextButton: ".pause-me",
    prevButton: ".swiper-button-prev" 
  };

但不是随意滑动，任何帮助？

Answer 1

下面的方法将自动滑动幻灯片，每当幻灯片更改时，都会出现一个新的（随机）幻灯片。随机方法使用slidelist的长度来计算随机索引（0到最大列表长度-1之间）。

<强> TS

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
   @ViewChild('mySlider') slider: Slides;


   ....

   getRandomIndex(): number {
     // uses your list.length to get a random value within the range
     return Math.floor(Math.random() * this.slides.length)
   }

   newSlide() {
     this.slider.slideTo(this.getRandomIndex(),500)
   }
}

<强> HTML

<ion-slides #mySlider (ionDidChange)="newSlide()" ........>

此答案中的所有信息均已从the ionic docs

中检索到

如何在离子2中选择自动随机滑块？

1 个答案: