ionic3 使用swiper插件 實現輪播效果

因爲app的更新迭代 我須要完成新版本設計圖的開發

剛開始就遇到一個問題  首頁的banner圖須要實現某種效果 而ionic3自帶的輪播圖效果怎麼改都改不到我想要的效果

效果圖以下  自動播放 不斷輪播

因此我就用平時用的swiper插件找找有沒有相似的 還真找到一個  連接 http://www.swiper.com.cn/demo/110-slides-per-view.html

不過在使用過程當中仍是遇到一些問題  下面會說到

1.在ionic3項目的src文件夾下面 有一個Index.html頁面 在裏面引入swiper.min.js 和 swiper.min.css

<link rel="stylesheet" type="text/css" href="assets/css/swiper.min.css">
<script src="assets/js/swiper.min.js"></script>

2.在你須要用到輪播圖的頁面 ts 中聲明 Swiper 

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


declare let Swiper:any;

3.在頁面加載完成以後寫入以下代碼  

    注意事項：slidesPerView 這個屬性的值能夠調成小數點 1.2 這樣才和設計圖的效果同樣

                      可是有個問題  當它的值未小數的時候而且循環輪播 第二次開始日後播放的時候 第二張圖片不會顯示就是尚未放到右邊那個位置(這是我研究它的代碼發現的一個bug) 可是它仍是會滾動 滾動後會顯示  詳情見下圖

                      這個問題我用另外一種方法解決了  slidesPerView的值改成了2  還用css樣式修改了一下  視覺上是同樣並且也沒有上面的問題  詳情看下面css

ionViewDidLoad() {
    var swiper = new Swiper('.swiper-container', {
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      slidesPerView: 2,
      spaceBetween: 10,
      centeredSlides: true,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  }

 

4.在對應的html中寫以下代碼

<div class="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="assets/images/positions/banner.png"></div>
        <div class="swiper-slide"><img src="assets/images/positions/banner2.png"></div>
        <div class="swiper-slide"><img src="assets/images/positions/banner3.png"></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

5.在對應的scss頁面寫入代碼

   注意事項：上面slidesPerView值改成2 以後 左右兩邊是下面圖片中的效果 左右兩邊太大了  佔百分比太多

   因此我外面包了一個類名爲banner的div 把它的寬調大 而後居中  多餘出來的被父元素overflow:hidden  因此和設計圖效果徹底同樣了 也沒有Bug了  完美解決！！！

// banner圖
  .banner {
    width: 180%;
    height: auto;
    margin-left: -40%;
    margin-top: 14px;
  }
  .banner img {
    width: 100%;
    display: block;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-pagination-bullet-active {
    background: #ff8503;
  }
  .swiper-slide img {
    width: 100%;
    border-radius: 15px!important;
  }

 而後  這個難題就攻克了  有遇到相似問題的 能夠試試  另外想在ionic3中引用外部插件的 也能夠用這種方法