前言

swiper

开源、免费、强大的滑动插件。

swiper中文网

https://www.swiper.com.cn/

Swiper4中文API

https://www.swiper.com.cn/api/index.html

Vue-Awesome-Swipwe

基于Swiper、适用于Vue的轮播组件，支持服务端和单页引用。

插件npm

https://www.npmjs.com/package/vue-awesome-swiper

在线demo

https://surmon-china.github.io/vue-awesome-swiper/

效果

场景

home.vue是仿音乐播放器的主页面，在home界面引入了Swiper_Banner.vue这个组件用来实现轮播图。

在Swiper_Banner.vue，滚动的图片已经写死，放在assets下的img目录下。

项目目录结构

实现

1.安装vue-awesome-swiper插件

项目根目录下打开命令行输入：

npm install --save vue-awesome-swiper

或者

cnpm install --save vue-awesome-swiper

2.home.vue中引入Swiper_Banner.vue组件

打开home.vue

引入组件

import SwiperBanner from "../components/Swiper_Banner"

其中../表示上级目录。

注入组件

export default {name:"home",components:{SwiperBanner}
}

引用组件

<template lang="html"><div class=""><TodayRecommend/><NewsMusic /><SwiperBanner/></div>
</template>

home.vue 完整代码

<template lang="html"><div class=""><TodayRecommend/><NewsMusic /><SwiperBanner/></div>
</template><script>
import TodayRecommend from "../components/Today_Recommend"
import NewsMusic from "../components/News_Music"
import SwiperBanner from "../components/Swiper_Banner"
export default {name:"home",components:{TodayRecommend,NewsMusic,SwiperBanner}
}
</script><style lang="css">
</style>

3.在Swiper_Banner.vue中配置轮播图

打开轮播图组件Swiper_Banner.vue

首先引入swiper以及swiper的样式文件

（局部注册：参照：https://www.npmjs.com/package/vue-awesome-swiper）

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

进行组件引入声明

 

 components: {swiper,swiperSlide}

页面添加swiper组件元素

参照：

https://www.npmjs.com/package/vue-awesome-swiper

下的SPA:

<!-- The ref attr used to find the swiper instance -->
<template><swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"><!-- 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>
</template><script>export default {name: 'carrousel',data() {return {swiperOption: {// some swiper options/callbacks// 所有的参数同 swiper 官方 api 参数// ...}}},computed: {swiper() {return this.$refs.mySwiper.swiper}},mounted() {// current swiper instance// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了console.log('this is current swiper instance object', this.swiper)this.swiper.slideTo(3, 1000, false)}}
</script>

这里只要分页器，别的属性不配置，

配置参数参照官方API参数：

https://www.swiper.com.cn/api/pagination/362.html

此处为：

<template lang="html"><div class="banner"><swiper :options="swiperOption"><swiper-slide><img src="../assets/img/b1.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b2.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b3.jpg" alt=""></swiper-slide><div class="swiper-pagination"  slot="pagination"></div></swiper></div>
</template>

配置swiper组件属性

export default {data(){return{swiperOption:{pagination: {el: '.swiper-pagination',//swiper的分页器},autoplay:{delay:1000,//间隔一秒滚动一次}//自动滚动}}},

Swiper_Banner.vue完整代码

<template lang="html"><div class="banner"><swiper :options="swiperOption"><swiper-slide><img src="../assets/img/b1.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b2.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b3.jpg" alt=""></swiper-slide><div class="swiper-pagination"  slot="pagination"></div></swiper></div>
</template><script>import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {data(){return{swiperOption:{pagination: {el: '.swiper-pagination',//swiper的分页器},autoplay:{delay:1000,//间隔一秒滚动一次}//自动滚动}}},components: {swiper,swiperSlide}
}
</script><style scoped>.banner{padding: 10px;
}</style>