uniapp订单页面顶部选择栏 多栏两行选择框

开箱即用 uniapp代码 完美运行微信小程序 支付宝小程序 H5 以及App

<template>
	<view class="ye">
		<!-- 顶部筛选栏 -->
		<view class="top">
			<view class="itemC" :class="{ active: selectedTab === 100 }" @click="selectTab(100)">
				全部
			</view>
			<view class="itemC" :class="{ active: selectedTab === 101 }" @click="selectTab(101)">
				待支付
			</view>
			<view class="itemC" :class="{ active: selectedTab === 102 }" @click="selectTab(102)">
				已支付
			</view>
			<view class="itemC" :class="{ active: selectedTab === 103 }" @click="selectTab(103)">
				待服务
			</view>
			<view class="itemC" :class="{ active: selectedTab === 104 }" @click="selectTab(104)">
				已完成
			</view>
		</view>
		<!-- 下面筛选栏 -->
		<view class="topB">
			<view class="itemC" :class="{ active: selectedCategory === 1000 }" @click="selectCategory(1000)">
				全部
			</view>
			<view class="itemC" :class="{ active: selectedCategory === 1001 }" @click="selectCategory(1001)">
				搬家
			</view>
			<view class="itemC" :class="{ active: selectedCategory === 1002 }" @click="selectCategory(1002)">
				宠物托运
			</view>
			<view class="itemC" :class="{ active: selectedCategory === 1003 }" @click="selectCategory(1003)">
				汽车托运
			</view>
			<view class="itemC" :class="{ active: selectedCategory === 1004 }" @click="selectCategory(1004)">
				其他
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedTab: 100,
				selectedCategory: 1000,
			};
		},
		methods: {
			selectTab(data) {
				console.log(data)
				this.selectedTab = data;
			},
			selectCategory(data) {
				this.selectedCategory = data;
			},
		},
	};
</script>

<style lang="less">
	.ye {
		background-color: #fff;
	}

	.top {
		display: flex;
		justify-content: space-around;
		padding: 0.1rem;

		.active {
			color: #5576f6;
			font-weight: 600;
			position: relative;
		}

		.itemC {
			padding: 0.5rem 0.5rem;
		}

		.active::after {
			left: 0;
			right: 0;
			bottom: 0;
			content: "";
			width: 1.6rem;
			margin: 0 auto;
			height: 6rpx;
			position: absolute;
			border-radius: 30rpx;
			background-color: #5576f6;
		}
	}

	.topB {
		padding: 25rpx;
		display: flex;
		/* 只允许水平方向的溢出，并显示滚动条 */
		overflow-x: auto;
		/* 防止内容换行 */
		white-space: nowrap;
		/* 将 justify-content 设置为 flex-start */
		justify-content: flex-start;

		.active {
			color: #5576f6;
			font-weight: 600;
			background-color: #999;
		}

		.itemC {
			font-size: 1rem;
			margin-right: 25rpx;
			border-radius: 0.5rem;
			padding: 0.2rem 0.5rem;
			background-color: rgba(247, 247, 247, 0.9);
		}
	}
</style>