ionic 中如何使用 swiper 插件

首先，我们下载 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 从新启动下即可。

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓