0 效果展示
移动端页面
image.gif
1 安装
打开命令行工具，在项目目录下执行以下命令
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, // 循环模式选项
autoplay:true, //自动播放
// 如果需要分页器
pagination:{
el: '.swiper-pagination',
bulletActiveClass: 'my-bullet-active', //用于后面修改分页器样式
},
})
}
4 html内容
<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 根据需求调整 样式
//设置轮播图宽高
.swiper-container
width: 100%
margin: 0
padding: 0
.swiper-slide img
max-width: 100%
//修改分页器颜色，由于swiper插件并不在当前组件中，用穿透符号进行样式设置
.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, // 循环模式选项
//autoplay:true, //自动播放
// 如果需要分页器
pagination:{
el: '.swiper-pagination',
bulletActiveClass: 'my-bullet-active',//用于后面修改分页器样式
},
})
}
}
</script>
<style lang="stylus" scoped>
//设置轮播图宽高
.swiper-container
width: 100%
margin: 0
padding: 0
.swiper-slide img
max-width: 100%
//修改分页器颜色，由于swiper插件并不在当前组件中，用穿透符号进行样式设置
.swiper-container >>> .my-bullet-active
background: #ff6600
opacity: 1
</style>
7 一个页面两个Swiper的冲突解决
问题：当一个页面中使用两个swiper时，两个swiper的效果一致，分别设置时不能起作用。
解决：这是因为初始化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 动态获取数据时轮播失效
轮播必须在页面渲染及数据加载完成后初始化才能够生效
1.页面渲染及数据加载完成后初始化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, // 循环模式选项
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, // 循环模式选项
autoplay: false, //自动播放
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: false,//修改swiper的父元素时，自动初始化swiper
pagination: {
el: '.swiper-pagination',
bulletActiveClass: 'my-bullet-active',//用于后面修改分页器样式
}
})
} else {
new Swiper('.swiper2', {
loop: false, // 循环模式选项
autoplay: false, //自动播放
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: false,//修改swiper的父元素时，自动初始化swiper
})
}
}
},
mounted() {
this.getHomeData();
}
}
</script>
<style scoped>
</style>
