今回はvue+swiperでサイドバーメニューを実装する方法を紹介します。vue+swiperでサイドバーメニューを実装するための注意点を実際に見てみましょう。
この記事の例では、サイドスライドメニュー効果を実現するためのvue Swiperの具体的なコードを共有します。具体的な内容は次のとおりです
。
この左右スライドと上下スライドは主にSwiperのカルーセル機能を利用しています。 1つ目は独自定義コンポーネントのコードです: <template>
<p class="s-slider">
<swiper :options="horizontalSwiperOptions" ref="horizontalSwiper">
<swiper-slide class="left" ref="left" v-bind:style="{'background':getRandomColor()}">
<slot name="left"></slot>
</swiper-slide>
<swiper-slide class="content">
<swiper :options="verticalSwiperOptions" ref="verticalSwiper">
<swiper-slide class="top" ref="top" v-bind:style="{'background':getRandomColor()}">
<slot name="top"></slot>
</swiper-slide>
<swiper-slide class="content" ref="content" v-bind:style="{'background':getRandomColor()}">
<slot name="content"></slot>
</swiper-slide>
<swiper-slide class="bottom" ref="bottom" v-bind:style="{'background':getRandomColor()}">
<slot name="bottom"></slot>
</swiper-slide>
</swiper>
</swiper-slide>
<swiper-slide class="right" ref="right" v-bind:style="{'background':getRandomColor()}">
<slot name="right"></slot>
</swiper-slide>
</swiper>
</p>
</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);
},
/*获取随机颜色*/
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>
<s-slider leftWidth="200px" rightWidth="300px" topHeight="100px" bottomHeight="150px"> <p slot="left"> left </p> <p slot="content"> Content </p> <p slot="right"> right </p> <p slot="top"> top </p> <p slot="bottom"> bottom </p> </s-slider>
この vue コンポーネントを親コンポーネントに忘れずに導入してください。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
vue.js のデータ転送とデータ配布手順の詳細な説明 Angular17 でのカスタム命令の使用の詳細な説明以上がvue+swiper がサイドバー メニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。