前言
swiper
开源、免费、强大的滑动插件。
swiper中文网
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>