0 效果展示
移動端頁面
image.gif
1 安裝
打開命令行工具，在項目目錄下執(zhí)行以下命令
npm install --save swiper
image.png
2 引入插件
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
3 初始化swiper
mounted() { //html加載完成之后初始化Swiper
var mySwiper = new Swiper('.swiper-container', {
loop: true, // 循環(huán)模式選項
autoplay:true, //自動播放
// 如果需要分頁器
pagination:{
el: '.swiper-pagination',
bulletActiveClass: 'my-bullet-active', //用于后面修改分頁器樣式
},
})
}
4 html內(nèi)容
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="s in slides" :key="s.id">
<img :src="s.img_url">
</div>
</div>
<!-- 分頁器 -->
<div class="swiper-pagination"></div>
</div>
5 根據(jù)需求調(diào)整 樣式
//設(shè)置輪播圖寬高
.swiper-container
width: 100%
margin: 0
padding: 0
.swiper-slide img
max-width: 100%
//修改分頁器顏色，由于swiper插件并不在當前組件中，用穿透符號進行樣式設(shè)置
.swiper-container >>> .my-bullet-active
background: #ff6600
opacity: 1
6 完整代碼（Swiper.vue）
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="s in slides" :key="s.id">
<img :src="s.img_url">
</div>
</div>
<!-- 分頁器 -->
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import Swiper from 'swiper' //輪播圖插件
import 'swiper/css/swiper.css'
export default {
name: "HomeSwiper",
data() {
return {
slides: [{id: 1, img_url: 'https://imgs.qunarzz.com/vc/6d/9f/35/b8ad5468f73fd60ec0ced086f6.jpg_92.jpg'},
{id: 2, img_url: 'https://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg'}]
}
},
mounted() {//html加載完成之后初始化Swiper
new Swiper('.swiper-container', {
loop: true, // 循環(huán)模式選項
//autoplay:true, //自動播放
// 如果需要分頁器
pagination:{
el: '.swiper-pagination',
bulletActiveClass: 'my-bullet-active',//用于后面修改分頁器樣式
},
})
}
}
</script>
<style lang="stylus" scoped>
//設(shè)置輪播圖寬高
.swiper-container
width: 100%
margin: 0
padding: 0
.swiper-slide img
max-width: 100%
//修改分頁器顏色，由于swiper插件并不在當前組件中，用穿透符號進行樣式設(shè)置
.swiper-container >>> .my-bullet-active
background: #ff6600
opacity: 1
</style>
7 一個頁面兩個Swiper的沖突解決
問題：當一個頁面中使用兩個swiper時，兩個swiper的效果一致，分別設(shè)置時不能起作用。
解決：這是因為初始化Swiper時默認用.swiper-container初始化輪播插件，若兩個swiper都用.swiper-container初始化時則只有第一次起作用，因此要解決就要分別標記兩個swiper，分別初始化。步驟如下：
1.兩個swiper上加上不同的class或id標記
<div class="swiper-container swiper1"><div>
<div class="swiper-container swiper2"><div>
注意：兩個都要加標記
2.分別初始化
new Swiper('.swiper1', {})
new Swiper('.swiper2', {})
8 動態(tài)獲取數(shù)據(jù)時輪播失效
輪播必須在頁面渲染及數(shù)據(jù)加載完成后初始化才能夠生效
1.頁面渲染及數(shù)據(jù)加載完成后初始化swiper
getHomeData() {
axios.get('/apis/home.json').then(this.getHomeDataSc)
},
getHomeDataSc(res) {
...
// 一定要加setTimeout，否則不成功
setTimeout(() => {
this.initSwiper()
}, 0)
},
2.修改swiper元素時，自動初始化swiper
observer: true,//修改swiper自己或子元素時，自動初始化swiper
observeParents: false,//修改swiper的父元素時，自動初始化swiper
3.完整代碼（Home.vue父組件）
<template>
<div>
<home-header :city="city"></home-header>
<home-swiper :slides="slides"></home-swiper>
<home-icons :iconList="iconList"></home-icons>
<home-recommend :recommendList="recommendList"></home-recommend>
<home-weekend :weekendList="weekendList"></home-weekend>
</div>
</template>
<script>
import HomeHeader from "@/pages/home/components/Header";
import HomeSwiper from "@/pages/home/components/Swiper";
import HomeIcons from "@/pages/home/components/Icons";
import HomeRecommend from "@/pages/home/components/Recommend";
import HomeWeekend from "@/pages/home/components/Weekend";
import axios from "axios"
import Swiper from "swiper";
export default {
name: "Home",
components: {HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend},
data() {
return {
city: '',
slides: [],
iconList: [],
recommendList: [],
weekendList: []
}
},
methods: {
getHomeData() {
axios.get('/apis/home.json').then(this.getHomeDataSc)
},
getHomeDataSc(res) {
const homeData = res.data
if (homeData.ret) {
this.city = homeData.data.city
this.slides = homeData.data.slides;
this.iconList = homeData.data.iconList;
this.recommendList = homeData.data.recommendList;
this.weekendList = homeData.data.weekendList;
}
// this.initSwiper()
setTimeout(() => {
this.initSwiper()
}, 0)
},
initSwiper() {
//輪播圖
new Swiper('.swiper1', {
loop: true, // 循環(huán)模式選項
autoplay: {
delay: 2000,
disableOnInteraction: false, //解決滑動后不能輪播的問題
},
observer: true,//修改swiper自己或子元素時，自動初始化swiper
observeParents: false,//修改swiper的父元素時，自動初始化swiper
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
bulletActiveClass: 'my-bullet-active',//用于后面修改分頁器樣式
}
})
//圖標輪播組件
var pageCount = Math.ceil(this.iconList.length / 8)
if (pageCount >= 2) {
new Swiper('.swiper2', {
loop: false, // 循環(huán)模式選項
autoplay: false, //自動播放
observer: true,//修改swiper自己或子元素時，自動初始化swiper
observeParents: false,//修改swiper的父元素時，自動初始化swiper
pagination: {
el: '.swiper-pagination',
bulletActiveClass: 'my-bullet-active',//用于后面修改分頁器樣式
}
})
} else {
new Swiper('.swiper2', {
loop: false, // 循環(huán)模式選項
autoplay: false, //自動播放
observer: true,//修改swiper自己或子元素時，自動初始化swiper
observeParents: false,//修改swiper的父元素時，自動初始化swiper
})
}
}
},
mounted() {
this.getHomeData();
}
}
</script>
<style scoped>
</style>
9 參考文檔
頁面跳轉(zhuǎn)傳參
API文檔
獲取動態(tài)數(shù)據(jù)
動態(tài)獲取數(shù)據(jù)時輪播失效
