本文實(shí)例為大家分享了vue swiper實(shí)現(xiàn)側(cè)滑菜單效果的具體代碼，供大家參考，具體內(nèi)容如下

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，小程序設(shè)計(jì)，軟件按需定制制作等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

先上效果圖：

這個(gè)左右滑動(dòng)以及上下滑動(dòng)主要使用了Swiper的輪播功能，首先是該自定義組件的代碼：

 該組件自定義了四個(gè)屬性，分別是左右側(cè)滑菜單的寬度，上下滑動(dòng)菜單的高度，leftWdith、rightWidth、topHeight、bottomHeight，然后用了一個(gè)橫向的輪播用來存放左滑菜單，中間內(nèi)容，右滑菜單，然后在中間內(nèi)容又放了一個(gè)縱向的輪播用來放置上滑菜單，內(nèi)容以及下滑菜單，具體思路就是這樣。在組件掛載的時(shí)候，需要根據(jù)父組件傳入的數(shù)值去初始化四個(gè)菜單的寬高，初始化完畢寬高之后，還要調(diào)用swiper本身的updateSlides更新所有的slides，不然滑動(dòng)的時(shí)候，還是按照沒設(shè)置之前的寬高進(jìn)行滑動(dòng)。在父組件中調(diào)用：

 
  
 
  left 
  
 
  
 
  Content 
  
 
  
 
  right 
  
 
  
 
  top 
  
 
  
 
  bottom 
  
 
  

不要忘了在父組件中還要引入這個(gè)vue組件。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。