ionic 中如何使用 swiper 插件

首先，我们下载 swiper 的 js 和 css，将其放置 assets 中，在 src 下的 index.html 中引入（当然也可以直接引入 CDN ）

接着，我们在自己对应页面中的html放入swiper的代码，如下

  
    共享博客
  



  

    

      

        
Slide 1
        
Slide 2
        
Slide 3
      
      
      


      
      

      


      
      

    
  

下来就是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',
      },
    })
  }

}

别忘了在 scss 里面设置宽高哦！

  .swiper-container {
    width: 100%;
    height: 300px;
  }

完成之后，页面会显示的是 try again later ，我们 ionic serve 从新启动下即可。

 

个人博客 http://www.sharedblog.cn/?post=123

个人微信小程序（希望大家支持下）