Vue横向滑动效果从小到大详解

文中给出了一个例子，说明Vue可以实现由小到大的横向滑动效应。分享给大家参考，如下：

最近项目里有个要求，需要水平滑动。在滑动过程中，中间大，两边小。通过参考别人的代码和我自己的实践，终于做出来了，供大家参考。

实现效果如下：

先说一下实现思路：

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

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

第一步：下载插件Vue-awesome-wiper

你可以直接从命令行下载，下载命令：NPM安装vue-awesome-wiper-save，然后全局保存。下载后，检查您下载的版本。下载后版本为3.1.3。不同版本之间可能略有差异，可以参考官方文件。

步骤2:将插件引入vue文件

第一步安装成功后，插件就可以在vue中使用了。这里有两种介绍方式。

首先，全局导入并打开main.js文件，并在其中添加以下代码，这样以后开发单独的vue文件时，就不需要单独导入了。这里路径是固定的，可以直接复制。这里，common.css是自己实现的。这个文件的使用将在后面描述。

从“vue”导入Vue从“vue-awesome-swiper”导入Vue“import”swiper/dist/CSS/swiper . CSS“import”./src/assets/common . CSS ' vue . use(VueAwesomeSwiper)；第二，如果本地插件是本地引入的，可以在自己的vue文件中引入。介绍方法如下：

注意：是否需要导入css文件取决于下载的插件版本。如果高于3，则不需要单独导入css文件；如果低于3，则需要单独导入。

导入' swipe/dist/CSS/swipe.css '从' vue-awesome-swipe '导入{swipe，swipe lid}导出默认{ components: { swipe，swipe lid}第三步：独立开发swipe的vue控件(这里以全局介绍法为例)。

模板！-滑动横幅-div类=' swing banner _ container ' swing 3360 options=' swing option ' ref=' MYS wiper ' swing-slide v-for='(item，index)in banner list ' : key=' item . bannerid ' img : src=' http : item . imgurl ' alt=' class=' banner _ img '/swiper-slide/swiper div类=' swiper-pagination '/div/div/template script从'导入bannerurl1././assets/mall/banner.png“从导入bannerurl2”././assets/smart/holiday.png“从导入bannerurl3”././assets/smart/leave _ home . png ' export default { name : ' SwiperBanner '，Data(){ return { swing option : { direction : ' horizontal }，space介于：10之间，observateparents: true，//observe parent component。当父组件更改时，观察者：在您更改时为真。//观察自己，当参数改变时，将居中的幻灯片3360更新为真。//设置为true时，活动块显示在中间，默认情况下左下方显示loop : true。//滑动前后会复制多个滑块。效果看起来是一个圆形的环形滑道：3。//设置滑动过程中使用的循环次数，slidesperview3360 ' auto '，//同时显示的幻灯片数，loopAdditionalSlides:100。自动播放： {延迟：3000，disableoniintervention : false//鼠标上移时是否继续播放}，分页： '。swipe-pagination '，paginationType : 'bullets '，pagination element : ' span ' } } }，prop : { banner list : { type : array，default : function(){ return[{ banner id 3:0，imgurl:bannerurl1，bannerlink:'' }，{ bannerid:1，imgurl: banner RLL 2，banner link 333:$ refs . MySwifer . Swiper } }，mounted() { console.log('这是当前swiper实例对象'，this . swiper)this . swiper . slide to(3，1000，false)；} }/script style scoped . swiper banner _ container { width :100%；高度：160 px；飞越：可见！重要；}.swiper-pagination { bottom :2 px！重要；} .banner _ img { width :100%；高度：116 px；}/style您可以在官方文档中看到需要使用的参数的具体含义，点击链接自行查看。

有两个参数需要特别注意：

:10之间的空间

此参数用于设置两张幻灯片之间的间距，可以根据自己的项目动态修改

observeParents: true

observer: true

观察父组件，当父组件改变时，它会动态地改变。开发之初没有设置这个变量，发现滑动特别不顺畅。感觉像是普通的滑动效果。如果因为未设置此变量而无法抓取，跳到下一张完整的幻灯片非常重要。

第四步是在所需的文件中引用它，并向他传递一个值。这里没有什么特别的，就像常用的引用方法一样。

第五步是独立实现css样式。

前四步完成后，我们无法完全实现渲染中的外观，需要手动修改插件中提供的样式。因为我是全局引入的，所以修改后的样式放在了刚才提到的common.css中。

Common.css内容如下：

/* *覆盖swiper-slider的属性* */。**/.swiper-slide { width :85% %；/*边距-left : 5px；*//*右边距： 5px；*/}.swiper-slide-active img { height :136 px！重要；}.swiper-slide-prev，swiper-slide-next { margin-top :10 px；}实现思路：中间活动状态高度放大幻灯片，在哪里！重要的不能省略，否则会失败，两边的滑梯会下移一定距离。因为我的幻灯片只有一张图片，所以我直接修改了图片的高度。如果你的是div，你可以把它改成div的类名。

刷新后，是最初的变现效果~

但是在这里实现分页的时候，我发现在vue中设置分页变量并不起作用，还没有解决，所以解决之后可以更新，就这样。

希望本文对vue.js程序的设计有所帮助。