在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; } }
哦了~