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

时间:2020-05-17 心若向阳无谓悲伤人气:0

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

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

实现效果如下图：

先来说一下实现思路吧：

整体思路：采用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 'swiperhttps://img.qb5200.com/download-x/dist/css/swiper.css'
import '../src/assets/common.css'
Vue.use(VueAwesomeSwiper);

第二种，局部插件引入

局部引入的话，就在你自己的vue文件中引入就可以了，引入方法如下：

说明：是否需要引入css文件需要看下载插件版本，如果是3以上，是不需要单独引入css文件的，如果是3以下，需要单独引入。

 import 'swiperhttps://img.qb5200.com/download-x/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 export default {
  components: {
   swiper,
   swiperSlide
  }

第三步：单独开发swiper的vue控件(这里以全局引入的方法为例) BannerSwiper.vue

<template>
  <!--滑动banner -->
 <div class="swiperbanner_container">
  <swiper :options="swiperOption" ref="mySwiper">
   <swiper-slide v-for="(item,index) in BannerList" :key="item.bannerid">
    <img :src="item.imgurl" alt="" class="banner_img">
   </swiper-slide>
  </swiper>
  <div class="swiper-pagination"></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样式。

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

实现的思路：将中间处于激活状态的slide高度放大，其中！important不可省略，要不然会失效，将两边的slide分别向下移动一段距离。因为我的slide中只有一张图片，所以我直接修改了图片的高度，如果你的是div的话，你可以换成div的class名称。

刷新后，就是最开始的实现效果啦~

不过这里实现分页，我发现vue中设置分页变量不起作用，目前还未解决，等解决了再来更新，就这样。

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

加载全部内容