在ionic2中集成swiper插件

本文转载自查看原文 2018-03-22 22:38 869 ionic2

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;
  }
}

哦了~

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 ionic2/cordova自定义插件集成aar包 Ionic2系列——在Ionic2中使用ECharts Ionic2使用第三方cordova插件（非Ionic2官方支持的native cordova插件） IDEA中集成gitee插件 IDEA中集成JRebel插件 eclipse中集成velocity插件 ionic2中跨页面回传值 Ionic2中使用第三方插件极光推送 eclipse中集成hadoop插件 IDEA中集成gitee插件