uniappでスライドナビゲーション実装

1 結果

最終的なページのレンダリングは次のようになる。

2 components作成

ルート ディレクトリに@/components/SlideNavBar/SlideNavBar.vue を作成する。components/は、コンポーネントを格納するために使用されるディレクトリ。

@/components/SlideNavBar/SlideNavBar.vue

<template>
	<scroll-view class="nav-scroll" scroll-x="true" :scroll-into-view="scrollIntoIndex">
	  <view 
			class="nav-item" 
			v-for="(item, index) in navigationItems" 
			:key="index" 
			:class="{ active: activeIndex === index }" 
			@click="changeActiveIndex(index)" 
			:id="'top' + index"
		>
	    <text>{{item}}</text>
	  </view>
	</scroll-view>
	
	<swiper class="swiper-container" @change="changeActiveSwiper" :current="activeIndex">
	  <swiper-item  v-for="(component, index) in contentComponents" :key="index">
	    <view class="swiper-item">
			<!-- ペイジのコンポーネント -->
	    </view>
	  </swiper-item>
	</swiper>
</template>

<script>
	export default {
		name:"SlideNavBar",
		components: {
		},
		props: {
			navigationItems: {
				type: Array,
				default: () => []
			},
			contentComponents: {
			  type: Array,
			  default: () => []
			},
		},
		data() {
			return {
				activeIndex: 0 ,// 現在選択されているナビゲーション項目のインデックス
				scrollIntoIndex: 'top0' ,// デフォルトで最初のナビゲーション項目を表示
			};
		},
		mounted() {
		},
		methods: {
			changeActiveIndex(index) {
			  this.activeIndex = index;
			  this.scrollIntoIndex = 'top' + index
			},
			changeActiveSwiper(e) {
			  this.changeActiveIndex(e.detail.current)
			}
		}
	}
</script>

<style lang="scss">
	.swiper-container {
		height: 100vh;
		.swiper-item {
			width: 100%;
			height: 100%;
			overflow-y: auto; // 垂直スクロールを有効にする。そうでない場合はスクロールできない
			.component-item {
				height: 100%;
			}
		}
	}
	
	.nav-scroll { 
	  width: 100%;
	  height: 80rpx;
	  white-space: nowrap;
	  .nav-item {
	    display: inline-block;
	    padding: 10rpx 38rpx;
	    font-size: 28rpx;
	  }
	}
	
	.active {
		color: #3a5697;
		border-bottom: 6rpx solid #3a5697;
	}
</style>

UniAppのテンプレート部分で、スクロール可能なナビゲーションバーとスワイパーを使用してコンテンツを表示する。

3 components導入

pageでSlideNavBarコンポーネント導入

@/pages/yourpage/yourpage.vue

<template>
	<SlideNavBar 
		:navigationItems="navigationItems"
		:contentComponents="contentComponents"
	/>
</template>

<script>
	import SlideNavBar from '@/components/SlideNavBar/SlideNavBar.vue'
	export default {
		components: {
			SlideNavBar,
		},
		data() {
			return {
				navigationItems: ['全て', 'コンピュタサイエンス', '化学', '数学/统计', '建築', '芸術', '政治学'],
				contentComponents: [
			      // ペイジのコンポーネント 
				],
			}
		},
		methods: {
		}
	}

</script>

<style lang="scss">

</style>