本文實(shí)例為大家分享了vue swiper實(shí)現(xiàn)側(cè)滑菜單效果的具體代碼,供大家參考,具體內(nèi)容如下
員工經(jīng)過長(zhǎng)期磨合與沉淀,具備了協(xié)作精神,得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念,因?yàn)椤皩W⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡(jiǎn)單”。公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、電商網(wǎng)站開發(fā),小程序設(shè)計(jì),軟件按需定制制作等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
先上效果圖:
這個(gè)左右滑動(dòng)以及上下滑動(dòng)主要使用了Swiper的輪播功能,首先是該自定義組件的代碼:
<template> <div class="s-slider"> <swiper :options="horizontalSwiperOptions" ref="horizontalSwiper"> <swiper-slide class="left" ref="left" v-bind:> <slot name="left"></slot> </swiper-slide> <swiper-slide class="content"> <swiper :options="verticalSwiperOptions" ref="verticalSwiper"> <swiper-slide class="top" ref="top" v-bind:> <slot name="top"></slot> </swiper-slide> <swiper-slide class="content" ref="content" v-bind:> <slot name="content"></slot> </swiper-slide> <swiper-slide class="bottom" ref="bottom" v-bind:> <slot name="bottom"></slot> </swiper-slide> </swiper> </swiper-slide> <swiper-slide class="right" ref="right" v-bind:> <slot name="right"></slot> </swiper-slide> </swiper> </div> </template> <script> import {swiper, swiperSlide, swiperWraper} from 'vue-awesome-swiper' export default { name: "s-slider", props: ['leftWidth','rightWidth','topHeight','bottomHeight'], data() { return { horizontalSwiperOptions: { slidesPerView: 'auto', initialSlide: 0, direction: 'horizontal' }, verticalSwiperOptions:{ slidesPerView: 'auto', initialSlide: 0, direction: 'vertical' } } }, mounted() { setTimeout(() => { this._initMenuWidth(); }, 20); }, methods: { _initMenuWidth() { this.$refs.left.$el.style.width = this.leftWidth; this.$refs.right.$el.style.width = this.rightWidth; this.$refs.top.$el.style.height = this.topHeight; this.$refs.bottom.$el.style.height = this.bottomHeight; this.horizontalSwiper.updateSlides(); this.horizontalSwiper.slideTo(1, 1000, false); this.verticalSwiper.updateSlides(); this.verticalSwiper.slideTo(1, 1000, false); }, /*獲取隨機(jī)顏色*/ getRandomColor() { return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6); } }, computed: { horizontalSwiper() { return this.$refs.horizontalSwiper.swiper; }, verticalSwiper(){ return this.$refs.verticalSwiper.swiper; } } } </script> <style scoped lang="scss"> @import "src/base/css/public/variable.scss"; @import "swiper/dist/css/swiper.css"; .s-slider { height: 100%; color: white; .swiper-container { @include fill-with-parent } } </style>
該組件自定義了四個(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)用:
<s-slider leftWidth="200px" rightWidth="300px" topHeight="100px" bottomHeight="150px"> <div slot="left"> left </div> <div slot="content"> Content </div> <div slot="right"> right </div> <div slot="top"> top </div> <div slot="bottom"> bottom </div> </s-slider>
不要忘了在父組件中還要引入這個(gè)vue組件。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
本文名稱:vue+swiper實(shí)現(xiàn)側(cè)滑菜單效果
當(dāng)前路徑:http://bm7419.com/article18/iipggp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、網(wǎng)站設(shè)計(jì)、域名注冊(cè)、微信小程序、網(wǎng)站建設(shè)、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)