1. github上搜索vue-awesome-swiper
2. readme中有安装方法，建议在插件名后@版本号，使用稳定的老版本 npm install vue-awesome-swiper@x.x.x –save
3. 在项目main.js中引入
import vue from 'vue'
import vueawesomeswiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
vue.use(vueawesomeswiper, /* { default global options } */)
4.创建单文件组件swiper.vue（单文件组件三部分template、script、style）
<template>
<swiper :options="swiperoption">
<!-- slides -->
//这里是轮播的内容
<swiper-slide>i'm slide 1</swiper-slide>
<swiper-slide>i'm slide 2</swiper-slide>
<swiper-slide>
<img src=""/>
</swiper-slide>
<swiper-slide>i'm slide 4</swiper-slide>
<swiper-slide>i'm slide 5</swiper-slide>
<swiper-slide>i'm slide 6</swiper-slide>
<swiper-slide>i'm slide 7</swiper-slide>
<!-- optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
//两个箭头，不需要可以删了
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
//滚动条，不需要可以删了
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
name: 'homeswiper',
// 子组件的data必须是个函数
data() {
return {
swiperoption: {}
}
},
}
</script>
<style lang="stylus" scoped>
</style>
5. 在别的页面中引用，如在home.vue
<template>
<div>
<home-header></home-header>
<home-swiper></home-swiper>
</div>
</template>
<script>
import homeheader from './component/header'
import homeswiper from './component/swiper'
export default {
name: 'home',
components: {
homeheader,
homeswiper
}
}
</script>
<style lang="stylus">
</style>
6.防抖动：在网速不好的情况下，swiper未加载出前，下方的div会占据，等到swiper出来时，占据位置的div会蹦走
处理方法：swiper外层嵌套div，让这个div撑开高度
<template>
<div class="wrapper">
<swiper :options="swiperoption">
...
</swiper>
</div>
</template>
<script>
...
</script>
<style lang="stylus" scoped>
.wrapper
overflow: hidden
width:100%
height:0
padding-bottom: 31.25% (宽高比,如果写在height，那么是和父级元素的高度,不是对比wrapper的宽度)
</style>
7.轮播图下面跟着跑的一排小圆点
<template>
<div class="wrapper">
<swiper :options="swiperoption">
<!-- slides -->
<swiper-slide>i'm slide 1</swiper-slide>
<swiper-slide>i'm slide 2</swiper-slide>
<swiper-slide>i'm slide 3</swiper-slide>
<swiper-slide>i'm slide 4</swiper-slide>
<swiper-slide>i'm slide 5</swiper-slide>
<swiper-slide>i'm slide 6</swiper-slide>
<swiper-slide>i'm slide 7</swiper-slide>
<!-- optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'homeswiper',
// 子组件的data必须是个函数
data() {
return {
swiperoption: {
pagination: 'swiper-pagination'
}
}
},
}
</script>
<style lang="stylus" scoped>
//三个箭头是穿透，这样就突破了scoped的限制
//这个class名从何而来，是从页面中审查元素得到的
.wrapper >>> .swiper-pagination-bullet-active
background: red !important
.wrapper
overflow: hidden
width:100%
height:0
padding-bottom: 31.25% (宽高比,如果写在height，那么是和父级元素的高度,不是对比wrapper的宽度)
</style>
8.vue是数据驱动的框架，轮播的图片地址和数量不该固定写死
处理方法：v-for循环item，注意循环要加key
<template>
<div class="wrapper">
<swiper :options="swiperoption">
<!-- slides -->
<swiper-slide v-for="item of swiperlist" :key="item.id">
<img :src="item.imgurl" />
</swiper-slide>
<!-- optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'homeswiper',
// 子组件的data必须是个函数
data() {
return {
swiperoption: {
pagination: 'swiper-pagination'
},
swiperlist: [{ id: '0001', imgurl: 'http://lkadand.adoaidiajd.jada.jpg' }, { id: '0002', imgurl: 'jndakm.adkand.sda.jpg' }]
}
},
}
</script>
<style lang="stylus" scoped>
//三个箭头是穿透，这样就突破了scoped的限制
//这个class名从何而来，是从页面中审查元素得到的
.wrapper >>> .swiper-pagination-bullet-active
background: red !important
.wrapper
overflow: hidden
width:100%
height:0
padding-bottom: 31.25% (宽高比,如果写在height，那么是和父级元素的高度,不是对比wrapper的宽度)
</style>
9.循环轮播
处理方法：加loop值为true
<template>
<div class="wrapper">
<swiper :options="swiperoption">
<!-- slides -->
<swiper-slide v-for="item of swiperlist" :key="item.id"><img :src="item.imgurl" /></swiper-slide>
<!-- optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'homeswiper',
// 子组件的data必须是个函数
data() {
return {
swiperoption: {
pagination: 'swiper-pagination',
loop: true
},
swiperlist: [{ id: '0001', imgurl: 'http://lkadand.adoaidiajd.jada.jpg' }, { id: '0002', imgurl: 'jndakm.adkand.sda.jpg' }]
}
},
}
</script>
<style lang="stylus" scoped>
//三个箭头是穿透，这样就突破了scoped的限制
//这个class名从何而来，是从页面中审查元素得到的
.wrapper >>> .swiper-pagination-bullet-active
background: red !important
.wrapper
overflow: hidden
width:100%
height:0
padding-bottom: 31.25% (宽高比,如果写在height，那么是和父级元素的高度,不是对比wrapper的宽度)
</style>
黄山市民网：https://www.huangshanshimin.com/
