ionic 中如何使用 swiper 插件

2021-06-09 10:51:45 阅读：248 来源： 互联网

标签：插件 level ionViewDidLoad Slide html 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',
      },
    })
  }

}

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

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

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

标签：插件,level,ionViewDidLoad,Slide,html,ionic,swiper
来源： https://blog.51cto.com/u_14209124/2884317

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ionic 中如何使用 swiper 插件