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 slot="pagination"></div>
//兩個箭頭，不需要可以刪了
<div slot="button-prev"></div>
<div slot="button-next"></div>
//滾動條，不需要可以刪了
<div 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 >
<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 >
<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 slot="pagination"></div>
<div slot="button-prev"></div>
<div slot="button-next"></div>
<div 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 >
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="item of swiperList" :key="item.id">
<img :src="https://www.cnblogs.com/VCplus/p/item.imgUrl" />
</swiper-slide>
<!-- Optional controls -->
<div 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 >
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="item of swiperList" :key="item.id"><img :src="https://www.cnblogs.com/VCplus/p/item.imgUrl" /></swiper-slide>
<!-- Optional controls -->
<div 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.uj5u.com/qiye/122019.html
標籤：Html/Css
上一篇：HTML學習之輪播圖