Vue如何实现从小到大的横向滑动效果？

本文共计1558个文字，预计阅读时间需要7分钟。

原文：本实例讲述了Vue+实现从小到大的横向滑动效果。分享给广大供广大专家参考，具体如下：+最近项目中遇到一个需求，需要实现横向滑动，并且在滑动过程中，中间的大，两边的通过显示。

改写后：本例展示如何使用Vue实现从简到繁的横向滑动效果。供专家们参考，内容如下：+近期项目需求，需实现滑动效果，滑动时中间区域放大，两侧缩小。

本文实例讲述了Vue 实现从小到大的横向滑动效果。分享给大家供大家参考，具体如下：

最近项目中遇到一个需求，需要实现横向滑动，并且在滑动过程中，中间的大，两边的小，通过参考其他的人代码以及自己的实践，终于做出来啦，给大家做个参考。

实现效果如下图：

先来说一下实现思路吧：

整体思路：采用vue+vue-awesome-swiper完成

因为我们的项目是采用vue来做的，所以在经过很多的考量和比较以后，选择了vue-awesome-swiper插件来辅助，从这个名字上也能看出，这个插件是支持vue的，使用起来也非常方便。

第一步：下载插件vue-awesome-swiper

可以在命令行直接下载，下载命令：npm install vue-awesome-swiper --save,进行全局保存，下载完成后查看一下你下载的版本，我下载后版本是3.1.3，不同的版本之间可能使用上会有一点细微的差别，可以参考官方文档。

第二步：在vue文件中引入插件

第一步安装成功后，插件就可以在vue中使用啦，在这里有两种引入方法。