在ionic2中集成swiper插件

1. 下载官方的js和css文件分别放在assets下的js和css文件夹，然后在index.html中引入

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  ...
  <link href="assets/css/swiper-4.1.6.min.css" rel="stylesheet">
  ...
</head>

<body>
  ...
  <script src="assets\js\swiper-4.1.6.min.js"></script>
</body>

</html>

2. home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
  </div>
</ion-content>

3. home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare let Swiper: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    var mySwiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      loop: true
    });
  }
}

4. home.scss

page-home {
  .swiper-container {
    width: 600px;
    height: 300px;
  }
}

哦了~

 

posted @ 2018-03-22 22:38  吉喆吉  阅读(1031)  评论(0)    收藏  举报