uniapp tab组件

1. uniapp tab组件

1.1. 直接拆开使用

<template>
	<view>
		<view class="head-nav">
			<view :class="navIndex==0?'activite':''" @click="checkIndex(0)">设备信息</view>
			<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">专家信息</view>
			<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">故障信息</view>
			<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">缺陷信息</view>
			<view :class="navIndex==4?'activite':''" @click="checkIndex(4)">报废信息</view>
		</view>

		<!-- 内容切换 -->
		<view class="content" v-if="navIndex==0">
			我是选项1
		</view>
		<view class="content" v-if="navIndex==1">
			我是选项2
		</view>
		<view class="content" v-if="navIndex==2">
			我是选项3
		</view>
		<view class="content" v-if="navIndex==3">
			我是选项4
		</view>
		<view class="content" v-if="navIndex==4">
			我是选项5
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
			}
		},
		methods: {
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
		}
	}
</script>

<style scoped>
	.head-nav {
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #CCCCCC;
	}

	.activite {
		color: #04c9c3;
	}

	.head-nav>view {
		padding-bottom: 10rpx;
	}

	.content {
		/* background: #008000; */
		height: 100%;
	}
</style>

1.2. 使用scroll-view滑动

<template>
	<view>
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
			<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
				:class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.name}}</view>
		</scroll-view>
		<!-- 内容切换 -->
		<view class="content" v-if="navIndex==0">
			我是选项1
		</view>
		<view class="content" v-if="navIndex==1">
			我是选项2
		</view>
		<view class="content" v-if="navIndex==2">
			我是选项3
		</view>
		<view class="content" v-if="navIndex==3">
			我是选项4
		</view>
		<view class="content" v-if="navIndex==4">
			我是选项5
		</view>
		<view class="content" v-if="navIndex==5">
			我是选项6
		</view>
		<view class="content" v-if="navIndex==6">
			我是选项7
		</view>
		<view class="content" v-if="navIndex==7">
			我是选项8
		</view>
		<view class="content" v-if="navIndex==8">
			我是选项9
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				tabBars: [{
					name: '关注',
					id: 'guanzhu'
				}, {
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '体育',
					id: 'tiyu'
				}, {
					name: '热点',
					id: 'redian'
				}, {
					name: '财经',
					id: 'caijing'
				}, {
					name: '娱乐',
					id: 'yule'
				}, {
					name: '军事',
					id: 'junshi'
				}, {
					name: '历史',
					id: 'lishi'
				}, {
					name: '本地',
					id: 'bendi'
				}],
			}
		},
		methods: {
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style scoped>
	.activite {
		color: #04c9c3;
	}

	.content {
		/* background: #008000; */
		height: 300px;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		color: #CCCCCC;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 20%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		padding: 10px 0;
	}
</style>

1.3. scroll-view + swiper

<template>
	<view>
		<!--顶部导航栏-->
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
			<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
				:class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">
				{{tab.name}}
			</view>
		</scroll-view>

		<!-- 内容 -->
		<swiper :current="navIndex" @change="tabChange" class="content">
			<swiper-item class="swiper_item ">
				设备信息
			</swiper-item>
			<swiper-item class="swiper_item ">
				专家信息
			</swiper-item>
			<swiper-item class="swiper_item ">
				故障信息
			</swiper-item>
			<swiper-item class="swiper_item ">
				缺陷信息
			</swiper-item>
			<swiper-item class="swiper_item ">
				报废信息
			</swiper-item>

		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				navIndex: 0,
				tabBars: [{
					name: '设备信息',
					id: 'equipment'
				}, {
					name: '专家信息',
					id: 'expert'
				}, {
					name: '故障信息',
					id: 'fault'
				}, {
					name: '缺陷信息',
					id: 'defect'
				}, {
					name: '报废信息',
					id: 'scrap'
				}],
			}
		},
		methods: {
			checkIndex(index) {
				this.navIndex = index;
				console.log(index)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//滑动切换swiper
			tabChange(e) {
				const navIndex = e.detail.current
				this.navIndex = navIndex
			},
		}
	}
</script>

<style scoped>
	.activite {
		color: #04c9c3;
	}

	.content {
		height: 700px;
		background-color: #04C9C3;
		color: #fff;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		color: #CCCCCC;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 20%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		padding: 10px 0;
		font-size: 32rpx;
	}
</style>