uniapp动态实现滑动导航效果demo（整理）

效果图：

<template>
	<view class="content">
		<!-- 导航区域 -->
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" enable-flex="true">
			<view :class="['scroll-view-item_H',currentTab==index?'active':'']" v-for="(item,index) in navbar"
				:key='index' @click="tabClick(index)">{
    {
    item}}</view>
		</scroll-view>
		<!-- 内容区域 -->
		<swiper class="swiper" :current="currentTab" @change="swiperTab" :style="{height:swiperHeight+'px'}">
			<swiper-item>
				<view class="swiper-item">
					导航一内容导航一内容导航一内容导航一内容
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					导航二内容导航二内容导航二内容导航二内容
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					导航三内容导航三内容导航三内容导航三内容
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					导航四内容导航四内容导航四内容导航四内容
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    
				navbar: ['导航一', '导航二', '导航三', '导航四'], //导航栏类目
				currentTab: 0, //当前选中的导航类目
				swiperHeight: 0 //动态给定swiper的高度
			}
		},
		onLoad(option) {
    
			this.swiperHeight = uni.getSystemInfoSync().windowHeight - 25;
			console.log(this.swiperHeight);
		},
		methods: {
    
			tabClick(index) {
    
				this.currentTab = index
			},
			swiperTab(e) {
    
				this.currentTab = e.detail.current; //获取索引
				console.log("this.currentTab", this.currentTab)
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
    
		width: 100%;

		.scroll-view_H {
    
			width: 100%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			overflow: hidden;

			.scroll-view-item_H {
    
				flex-shrink: 0;
				width: 300rpx;
				color: #000000;
				font-size: 30rpx;
				font-size: bold;
				background-color: #EA5149;
				letter-spacing: .1em;
				text-shadow: 0px 1px 2px #A42B14;
			}

			.active {
    
				font-size: 40rpx;
				color: #55aaff;
			}
		}

		.swiper-item {
    
			height: 100%;
		}
	}
</style>