在ionic2中集成swiper插件

時間 2019-11-11

標籤 ionic2 ionic 集成 swiper 插件简体版

原文原文鏈接

1. 下載官方的js和css文件分別放在assets下的js和css文件夾，而後在index.html中引入css

<!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.htmlhtml

<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.tsapp

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.scssionic

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

哦了~ide

相關標籤/搜索