使用Vue怎么实现一个从小到大的横向滑动效果

使用Vue怎么实现一个从小到大的横向滑动效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网络空间、营销软件、网站建设、前郭网站维护、网站推广。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用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

.swiperbanner_container{
 width:100%;
 height:160px;
 overflow: visible !important;
}
.swiper-pagination{
 bottom:2px !important;
}
 .banner_img{
  width:100%;
  height:116px;
 }

需要使用到的参数可以在官方文档中看到具体的含义，点击链接自行查看。

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

spaceBetween:10

这个参数用于设置两个slide之间的间隙，可根据自己的项目动态修改

observeParents: true

observer: true

观察父组件，当父组件变化时，自己动态改变，刚开始开发的时候我没有设置这个变量，发现滑动的时候特别不流畅，感觉就是普通的滑动效果，无法划一下就跳到下一个完整的slide上去就是因为这个变量没有设置，所以非常重要。

第四步，在需要的文件中引用它，并给他传值，这里不多说，没什么特殊性，和普通的引用方法一样。

第五步，单独实现css样式。

经过了前四步以后，其实还不能完全实现效果图中的样子，我们还需要手动去修改插件中提供的样式。因为我是全局引入，所以修改的样式就放在刚开始说的common.css中。

common.css的内容如下：

/**重写swiper-slider的属性**/
.swiper-slide{
 width:85%;
 /*margin-left: 5px;*/
 /*margin-right: 5px;*/
}
.swiper-slide-active>img{
  height:136px !important;
 }
.swiper-slide-prev,.swiper-slide-next{
 margin-top:10px;
}

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。