Vue 實現(xiàn)從小到大的橫向滑動效果詳解

更新時間：2019年10月16日 11:26:36 作者：心若向陽無謂悲傷

這篇文章主要介紹了Vue 實現(xiàn)從小到大的橫向滑動效果,結(jié)合實例形式詳細(xì)分析了vue.js橫向漸變滑動效果的實現(xiàn)步驟、相關(guān)操作技巧與注意事項,需要的朋友可以參考下

本文實例講述了Vue 實現(xiàn)從小到大的橫向滑動效果。分享給大家供大家參考，具體如下：

最近項目中遇到一個需求，需要實現(xiàn)橫向滑動，并且在滑動過程中，中間的大，兩邊的小，通過參考其他的人代碼以及自己的實踐，終于做出來啦，給大家做個參考。

實現(xiàn)效果如下圖：

先來說一下實現(xiàn)思路吧：

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

因為我們的項目是采用vue來做的，所以在經(jīng)過很多的考量和比較以后，選擇了vue-awesome-swiper插件來輔助，從這個名字上也能看出，這個插件是支持vue的，使用起來也非常方便。

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

可以在命令行直接下載，下載命令：npm install vue-awesome-swiper --save,進行全局保存，下載完成后查看一下你下載的版本，我下載后版本是3.1.3，不同的版本之間可能使用上會有一點細(xì)微的差別，可以參考官方文檔。

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

第一步安裝成功后，插件就可以在vue中使用啦，在這里有兩種引入方法。

第一種，全局引入

打開main.js文件，在里面加入以下代碼，這樣在后面開發(fā)單獨的vue文件的時候，就不需要再去單獨導(dǎo)入了，這里路徑是固定的，直接復(fù)制就可以，這里的common.css是自己實現(xiàn)的，這個文件的用處后面講。

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
  }

第三步：單獨開發(fā)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,  //觀察父組件，當(dāng)父組件變化時，自己隨著變化
        observer: true,   //觀察自己，自己的參數(shù)變化時，更新
        centeredSlides:true,  //設(shè)置為true時，活動塊居中顯示，默認(rèn)下居左顯示
        loop:true,  //滑動過程中會在前后復(fù)制多個slider,效果看起來是循環(huán)的
        loopedSlides:3,  //設(shè)置滑動過程中所要用到的loop個數(shù)
        slidesPerView:'auto',  //同時顯示的slide數(shù)量
        loopAdditionalSlides:100,
        autoPlay:{
         delay:3000,
         disableOnInteraction:false //鼠標(biāo)移動上去時是否繼續(xù)播放
        },
        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>

需要使用到的參數(shù)可以在官方文檔中看到具體的含義，點擊鏈接自行查看。

這里有兩個參數(shù)需要特別注意：

spaceBetween:10

這個參數(shù)用于設(shè)置兩個slide之間的間隙，可根據(jù)自己的項目動態(tài)修改

observeParents: true

observer: true

觀察父組件，當(dāng)父組件變化時，自己動態(tài)改變，剛開始開發(fā)的時候我沒有設(shè)置這個變量，發(fā)現(xiàn)滑動的時候特別不流暢，感覺就是普通的滑動效果，無法劃一下就跳到下一個完整的slide上去就是因為這個變量沒有設(shè)置，所以非常重要。

第四步，在需要的文件中引用它，并給他傳值，這里不多說，沒什么特殊性，和普通的引用方法一樣。

第五步，單獨實現(xiàn)css樣式。

經(jīng)過了前四步以后，其實還不能完全實現(xiàn)效果圖中的樣子，我們還需要手動去修改插件中提供的樣式。因為我是全局引入，所以修改的樣式就放在剛開始說的common.css中。

common.css的內(nèi)容如下：

/**重寫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;
}

實現(xiàn)的思路：將中間處于激活狀態(tài)的slide高度放大，其中！important不可省略，要不然會失效，將兩邊的slide分別向下移動一段距離。因為我的slide中只有一張圖片，所以我直接修改了圖片的高度，如果你的是div的話，你可以換成div的class名稱。

刷新后，就是最開始的實現(xiàn)效果啦~

不過這里實現(xiàn)分頁，我發(fā)現(xiàn)vue中設(shè)置分頁變量不起作用，目前還未解決，等解決了再來更新，就這樣。

希望本文所述對大家vue.js程序設(shè)計有所幫助。

您可能感興趣的文章: