首先，我们下载 swiper 的 js 和 css，将其放置 assets 中，在 src 下的 index.html 中引入（当然也可以直接引入 CDN ）
<!--Swiper--> <link rel="stylesheet" href="./assets/css/swiper-4.4.1.min.css"> <script src="./assets/js/swiper-4.4.1.min.js"></script>
接着，我们在自己对应页面中的html放入swiper的代码，如下
<ion-header>
<ion-navbar>
<ion-title>懒猪</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="swiper_box">
<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 class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</ion-content>下来就是ts中放入js代码
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
declare let Swiper: any;
@IonicPage()
@Component({
selector: 'page-level-that',
templateUrl: 'level-that.html',
})
export class LevelThatPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LevelThatPage');
this.swiper();
}
swiper(){
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
}
}别忘了在 css 里面设置宽高哦！
.swiper-container {
width: 100%;
height: 300px;
}完成之后，页面会显示的是 try again later ，我们 ionic serve 从新启动下即可。
本文链接：https://my.lmcjl.com/post/20967.html
展开阅读全文
4 评论