uniapp 自定义导航栏切换（点击，滑动切换）

1.页面部分 

<view>
		<scroll-view scroll-x="true" class="scroll-view_H" :scroll-into-view="scrollinto"
			style="background-image: linear-gradient(to bottom right, #2683cf, skyblue);padding: 10rpx 0;">
			<view v-for="(item,index) in tabBars.list" :key="index" @click="changeIndex(index)" :id="'tab'+index">
				<view :class="{active:currentIndex===index}">
					{
   
   {item.name}}
				</view>
			</view>
		</scroll-view>
		<swiper :style="'height:'+scrollH+'px'" :current="currentIndex" @change="changeTab">
			<swiper-item>
				<view class="swiper-item">
					<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">
						12312
					</scroll-view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">
						21331232
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
</view>

2.js部分

data() {
			return {
				scrollinto: '',
				scrollH: '', //动态获取高度
				currentIndex: 0,
				tabBars: {
					list: [{
							id: 1,
							name: '首页'
						},
						{
							id: 2,
							name: '我的'
						}
					]
				},
			}
		},
		mounted() {
			//动态获取高度
			uni.getSystemInfo({
				success: (e) => {
					this.scrollH = e.windowHeight - uni.upx2px(88)
				}
			})
		},
		methods: {
			//点击导航切换变色
			changeIndex(index) {
				if (this.currentIndex == index) return
				this.currentIndex = index
				this.scrollinto = 'tab' + index
			},
			changeTab(e) { //这是swipe中current变换后触发
				this.currentIndex = e.detail.current
			},
		}

3.css部分

.scroll-view_H {
	white-space: nowrap;
	height: 88rpx;
	line-height: 74rpx;
}
	
.scroll-view_H view {
	width: 50%;
	text-align: center;
	display: inline-block;
}
	
.active {
	color: #fff;
	border-bottom: 4rpx solid #fff;
}