uniapp横向选项卡（水平滚动导航栏）效果二demo（整理）

效果一链接

<template>
	<view>
		<!-- tab部分 -->
		<swiper class="ct_tab">
			<swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index"
				class="ct_item" @click="clickCtTab(index)">
				<text v-text="item.title"></text>
			</swiper-item>
		</swiper>

		<!-- 内容信息 -->
		<view v-if="tabCur===0">
			<view>全部信息</view>
		</view>
		<view v-if="tabCur===1">
			<view>水果</view>
		</view>
		<view v-if="tabCur===2">
			<view>蔬菜</view>
		</view>
		<view v-if="tabCur===3">
			<view>调味品</view>
		</view>
		<view v-if="tabCur===4">
			<view>肉类</view>
		</view>
		<view v-if="tabCur===5">
			<view>油类</view>
		</view>
		<view v-if="tabCur===6">
			<view>米类</view>
		</view>
		<view v-if="tabCur===7">
			<view>海鲜</view>
		</view>

	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				tabCur: 0,
				tabList: [{
    
    
					title: '全部',
				}, {
    
    
					title: '水果',
				}, {
    
    
					title: '蔬菜',
				}, {
    
    
					title: '调味品',
				}, {
    
    
					title: '肉类',
				}, {
    
    
					title: '油类',
				}, {
    
    
					title: '米类',
				}, {
    
    
					title: '海鲜',
				}]
			}
		},
		methods: {
    
    
			clickCtTab(ctCur) {
    
    
				this.tabCur = ctCur
				console.log('点击了--->' + this.tabCur)
			}
		}
	}
</script>

<style>
	.ct_tab {
    
    
		width: 698upx;
		height: 100rpx;
		margin: 0 auto;
		padding: 30upx 0;
		font-size: 26upx;
		font-weight: bold;
		color: #c0c8d0;
		white-space: nowrap;
		display: flex;
		overflow: hidden;
	}

	.ct_item {
    
    
		width: 150upx;
		padding: 30upx 0;
		display: inline-block;
	}

	.ct_item text {
    
    
		padding: 30upx 0;
	}

	.ct_active {
    
    
		color: #007AFF;
	}

	.ct_active text {
    
    
		border-bottom: 2px solid #007AFF;
	}

	swiper {
    
    
		width: 100%;
	}

	swiper-item {
    
    
		width: 150upx !important;
	}
</style>

转载：
原文链接：https://blog.csdn.net/qq_59795720/article/details/125002973?spm=1001.2014.3001.5501