最近项目中遇到一个需求,需要实现横向滑动,并且在滑动过程中,中间的大,两边的小,通过参考其他的人代码以及自己的实践,终于做出来啦,给大家做个参考。
实现效果如下图:
先来说一下实现思路吧:
整体思路:采用vue+vue-awesome-swiper完成
因为我们的项目是采用vue来做的,所以在经过很多的考量和比较以后,选择了vue-awesome-swiper插件来辅助,从这个名字上也能看出,这个插件是支持vue的,使用起来也非常方便。
第一步:下载插件vue-awesome-swiper
可以在命令行直接下载,下载命令:npm install vue-awesome-swiper --save,进行全局保存,下载完成后查看一下你下载的版本,我下载后版本是3.1.3,不同的版本之间可能使用上会有一点细微的差别,可以参考官方文档。
第二步:在vue文件中引入插件
第一步安装成功后,插件就可以在vue中使用啦,在这里有两种引入方法。
第一种,全局引入