ionic2 学习笔记（八）轮播图 方块导航

 

 

<ion-slides pager autoplay="1000" autoplayDisableOnInteraction="false" loop="true" speed="800" style="max-height:400px" *ngIf="slides.length > 1">
    <ion-slide *ngFor="let slide of slides" >
      <img [src]="slide.image" class="slide-image" />
      <h2 class="slide-title" [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.description"></p>
    </ion-slide>
    <ion-slide>
      <img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
      <h2 class="slide-title">Ready to Play?</h2>
      <button ion-button large clear icon-right color="primary">
        Continue
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-slide>
  </ion-slides>

import { NavController, Slides } from 'ionic-angular';
slides = [
    {
      title: "Welcome to the Docs!",
      description: "The <b>Ionic Component Documentation</b> showcases a number of useful components that are included out of the box with Ionic.",
      image: "assets/img/ica-slidebox-img-1.png",
    },
    {
      title: "What is Ionic?",
      description: "<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.",
      image: "assets/img/ica-slidebox-img-2.png",
    },
    {
      title: "What is Ionic Cloud?",
      description: "The <b>Ionic Cloud</b> is a cloud platform for managing and scaling Ionic apps with integrated services like push notifications, native builds, user auth, and live updating.",
      image: "assets/img/ica-slidebox-img-3.png",
    }
  ];

 文档翻译：http://blog.csdn.net/qq_33315185/article/details/68927269

<ion-slides>标签的附件属性

autoplay 值是number，自动播放功能，默认值是null，也不自动翻页，如果赋值的话，就会自动播放，以毫秒为单位，不循环。

control 值是slides 传入一个或者一组Slide实例化对象，通过当前slide来控制这些slides.

dir 值是字符串形式 如果dir属性值等于rtlinteral_rtl等于ture;

direction 默认值是"horizontal",还可以设置成“vertical";

effect 用于设置动画效果，默认值是”slide”,其他值有：slide, fade, cube, coverflow， flip;

initialSlide 设置slide初始索引值，默认值是0;

loop 默认false，设置成true,就会无限循环。

pager 默认false,设置成true,底部就会有小点点。

paginationType 楼上pager的样式，默认值为‘bullets’，‘fraction’, ‘progress’

parallax 如果设置为true,开发者可以在slider里面使用parallaxed元素;

slidesPerView 默认值是1，

spaceBetween 每个slide之间的距离 默认值0;

speed 滑动用时，默认值300;

zoom 默认false,如果设置为true,

<ion-row>
    <ion-col>
      <ion-buttons>
        <img width="34" height="34" src="https://m.360buyimg.com/mobilecms/s80x80_jfs/t5668/159/160398199/14046/acfe1fa3/591d9424N068a7ad0.png">
        <div text-center>海外购</div>
      </ion-buttons>
    </ion-col>
    <ion-col>
      <ion-buttons>
        <img width="34" height="34" src="https://m.360buyimg.com/mobilecms/s80x80_jfs/t5668/159/160398199/14046/acfe1fa3/591d9424N068a7ad0.png">
        <div text-center>海外购</div>
      </ion-buttons>
    </ion-col>
    <ion-col>
      <ion-buttons>
        <img width="34" height="34" src="https://m.360buyimg.com/mobilecms/s80x80_jfs/t5668/159/160398199/14046/acfe1fa3/591d9424N068a7ad0.png">
        <div text-center>海外购</div>
      </ion-buttons>
    </ion-col>
    <ion-col>
      <ion-buttons>
        <img width="34" height="34" src="https://m.360buyimg.com/mobilecms/s80x80_jfs/t5668/159/160398199/14046/acfe1fa3/591d9424N068a7ad0.png">
        <div text-center>海外购</div>
      </ion-buttons>
    </ion-col>
    <ion-col>
      <ion-buttons>
        <img width="34" height="34" src="https://m.360buyimg.com/mobilecms/s80x80_jfs/t5668/159/160398199/14046/acfe1fa3/591d9424N068a7ad0.png">
        <div text-center>海外购</div>
      </ion-buttons>
    </ion-col>
  </ion-row>
  <ion-row>