最近项目中遇到一个需求，需要实现横向滑动，并且在滑动过程中，中间的大，两边的小，通过参考其他的人代码以及自己的实践，终于做出来啦，给大家做个参考。
实现效果如下图：
先来说一下实现思路吧：
整体思路：采用vue+vue-awesome-swiper完成
因为我们的项目是采用vue来做的，所以在经过很多的考量和比较以后，选择了vue-awesome-swiper插件来辅助，从这个名字上也能看出，这个插件是支持vue的，使用起来也非常方便。
第一步：下载插件vue-awesome-swiper
可以在命令行直接下载，下载命令：npm install vue-awesome-swiper --save,进行全局保存，下载完成后查看一下你下载的版本，我下载后版本是3.1.3，不同的版本之间可能使用上会有一点细微的差别，可以参考官方文档。
第二步：在vue文件中引入插件
第一步安装成功后，插件就可以在vue中使用啦，在这里有两种引入方法。
第一种，全局引入
打开main.js文件，在里面加入以下代码，这样在后面开发单独的vue文件的时候，就不需要再去单独导入了，这里路径是固定的，直接复制就可以，这里的common.css是自己实现的，这个文件的用处后面讲。
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' import '../src/assets/common.css' Vue.use(VueAwesomeSwiper);
第二种，局部插件引入
局部引入的话，就在你自己的vue文件中引入就可以了，引入方法如下：
说明：是否需要引入css文件需要看下载插件版本，如果是3以上，是不需要单独引入css文件的，如果是3以下，需要单独引入。
import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }
第三步：单独开发swiper的vue控件(这里以全局引入的方法为例) BannerSwiper.vue
<template> <!--滑动banner --> <div> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(item,index) in BannerList" :key="item.bannerid"> <img :src="item.imgurl" alt=""> </swiper-slide> </swiper> <div></div> </div> </template> <script> import bannerurl1 from '../../assets/mall/banner.png' import bannerurl2 from '../../assets/smart/holiday.png' import bannerurl3 from '../../assets/smart/leave_home.png' export default { name: "SwiperBanner", data() { return { swiperOption:{ direction:'horizontal', spaceBetween:10, observeParents: true, //观察父组件，当父组件变化时，自己随着变化 observer: true, //观察自己，自己的参数变化时，更新 centeredSlides:true, //设置为true时，活动块居中显示，默认下居左显示 loop:true, //滑动过程中会在前后复制多个slider,效果看起来是循环的 loopedSlides:3, //设置滑动过程中所要用到的loop个数 slidesPerView:'auto', //同时显示的slide数量 loopAdditionalSlides:100, autoPlay:{ delay:3000, disableOnInteraction:false //鼠标移动上去时是否继续播放 }, pagination : '.swiper-pagination', paginationType : 'bullets', paginationElement:'span' } } }, props:{ BannerList:{ type:Array, default:function(){ return [ { bannerid:0, imgurl:bannerurl1, bannerlink:'' },{ bannerid:1, imgurl:bannerurl2, bannerlink:'' },{ bannerid:2, imgurl:bannerurl3, bannerlink:'' } ] } } }, methods: { }, computed: { swiper() { return this.$refs.mySwiper.swiper } }, mounted() { console.log('this is current swiper instance object', this.swiper) this.swiper.slideTo(3, 1000, false); } } </script> <style scoped> .swiperbanner_container{ width:100%; height:160px; overflow: visible !important; } .swiper-pagination{ bottom:2px !important; } .banner_img{ width:100%; height:116px; } </style>
需要使用到的参数可以在官方文档中看到具体的含义，点击链接自行查看。
这里有两个参数需要特别注意：
spaceBetween:10
这个参数用于设置两个slide之间的间隙，可根据自己的项目动态修改
observeParents: true
observer: true
观察父组件，当父组件变化时，自己动态改变，刚开始开发的时候我没有设置这个变量，发现滑动的时候特别不流畅，感觉就是普通的滑动效果，无法划一下就跳到下一个完整的slide上去就是因为这个变量没有设置，所以非常重要。
第四步，在需要的文件中引用它，并给他传值，这里不多说，没什么特殊性，和普通的引用方法一样。
第五步，单独实现css样式。