Swiper
- Swiper 是一款免費以及輕量級的移動設備觸控滑塊的js框架，使用硬件加速過渡（如果該設備支持的話）。主要使用於移動端的網站、移動web apps，native apps和hybrid apps。主要是為IOS而設計的，同時，在Android、WP8系統也有着良好的用戶體驗，Swiper從3.0開始不再全面支持PC端。因此，如需在PC上兼容更多的瀏覽器，可以選擇Swiper2.x（甚至支持IE7）。
下載方法
-
cdn地址
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> <script src="https://unpkg.com/swiper/js/swiper.js"> </script> <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script> -
命令行
npm install swiper
靜態使用方法
1.基本結構
<div class="swiper-container"> <-- 最外層 -->
<div class="swiper-wrapper"> <-- 包裹層 -->
<div class="swiper-slide">Slide 1</div> <-- 中間輪播 -->
<div class="swiper-slide">Slide 2</div>
</div>
</div>
- js代碼
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1, //一頁幾張
paginationClickable: true, //點擊跳轉
spaceBetween: 30, // 外邊距
loop: true //輪播
});
vue中使用方法
<div id="box">
<div class="swiper-container banner">
<div class="swiper-wrapper">
<div v-for="(data,index) in datalist" :key="index" class="swiper-slide">
{{data}}
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- 分頁器 -->
<div class="swiper-pagination"></div>
</div>
</div>
var vm = new Vue({
el:"#box",
data:{
datalist:[],
},
mounted() {
//ajax,
setTimeout(()=>{
this.datalist = ["111111","2222222","333333"]
// 狀態賦值完, 異步上樹(更新樹)
var oslide = document.querySelectorAll(".swiper-slide")
this.myswiper = new Swiper(".banner",{
loop:true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
}
})
},2000)
},
updated() {
//讓swiper自動更新一次
this.myswiper.update(true)
},
})
vue swiper 組件
<div id="box">
<swiper :key="datalist.length" :perview="3">
<div v-for="data in datalist" :key="data.filmId"
class="swiper-slide">
<img :src="data.poster"/>
</div>
</swiper>
</div>
Vue.component("swiper",{
template:`
<div class="swiper-container banner">
<div class="swiper-wrapper">
<slot></slot>
</div>
</div>`,
//屬性檢查
props:{
perview:Number
},
mounted() {
new Swiper(".banner",{
loop:true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
slidesPerView: this.perview, //一頁顯示幾張
spaceBetween: 30 //每張圖片間距30px
// direction:"vertical"
})
},
destroyed() {
console.log("destroyed")
},
})
一個項目中多個swiper的用法
1. 封裝swiper組件：swiper.vue
<template>
<div class="swiper-container" :class="addClass">
<-- 添加類名 區分 -->
<div class="swiper-wrapper">
<slot></slot>
<-- 留插槽 獲取數據 添加數據 -->
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default {
props:["addData","addClass"],
//傳值
mounted(){
new Swiper("."+(this.addClass?this.addClass:'swiper-container'),
this.addData)
}
}
</script>
- 當第一個頁面有一個大輪播圖，最基礎的一頁一張
<swiper :key="looplist.length">
<div class="swiper-slide" v-for="data in looplist" :key="data.bannerId">
<img :src="data.imgUrl"/>
</div>
</swiper>
- 當另一個頁面還有一個輪播，我們需要引用swiper組件，這次是一頁三張，需要傳值
<swiper :addData="{
slidesPerView: 3, //一頁三張
spaceBetween: 30, //邊距
freeMode: true
}" addClass="actor">
<div class="swiper-slide" v-for="(data,index) in filminfo.actors"
:key="index">
<img :src="data.avatarAddress"/>
</div>
</swiper>
- 另一個頁面還有一個四張圖的輪播，這回就好做了，與上面輪播三張的一樣，只是屬性值不一樣
<swiper :addData="{
slidesPerView: 4, //一頁4張
spaceBetween: 30, //邊距
freeMode: true
}" addClass="actor">
<div class="swiper-slide" v-for="(data,index) in filminfo.actors"
:key="index">
<img :src="data.avatarAddress"/>
</div>
</swiper>
API文檔
- 使用swiper時，api非常方便。直接查文檔，添加到實例里就可以了。
Free Mode （free模式/抵抗反彈）
Loop (環路)
loop:falseloopAdditionalSlides:0loopedSlides:1loopFillGroupWithBlank:false
Progress（進度）
Clicks (點擊)
Touches(觸發條件)
Swiping / No swiping(禁止切換)
Observer （監視器）
Namespace （命名空間）
Events （事件）
Properties （Swiper屬性）
Methods （Swiper方法）
Autoplay (自動切換)
Effects (切換效果)
Pagination（分頁器）
Navigation Buttons（前進后退按鈕）
Scollbar（滾動條）
Keyboard（鍵盤）
Mousewheel (鼠標)
Lazy Loading(延遲加載)
Zoom (調焦)
Controller (雙向控制)