uni——tab切换、分段器

案例展示

案例代码

<view class="tablist">
	<block v-for="(item,index) in tabList" :key="index">
		<view class="tabItem" :class="current == item.id?'active':''" @click="changeTab(item)">
			{{item.name}}
		</view>
	</block>
</view>

const tabList = ref([{
	id: 1,
	name: '收入'
}, {
	id: 2,
	name: '支出'
}])
const current = ref(1)
function changeTab(item) {
	current.value = item.id
}

.tablist {
	display: flex;
	width: 229rpx;
	height: 56rpx;
	border-radius: 60rpx;
	border: 1rpx solid #FFFFFF;

	.tabItem {
		width: 122rpx;
		height: 56rpx;
		border-radius: 60rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.active {
		color: var(--theme-color);
		background-color: #ffffff;
	}
}

案例2

代码

<view class="tabList">
	<block v-for="(item,index) in tabList" :key="index">
		<view :class="{'tabItem':true,'active':current == item.value}" @click="changeTab(item)">
			{{item.name}}
		</view>
	</block>
</view>

const tabList = ref([{
	value: 1,
	name: '商品'
}, {
	value: 2,
	name: '优惠券'
}])
const current = ref(1)
function changeTab(item) {
	current.value = item.value
}

.tabList {
	height: 95rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(223, 223, 223, 0.3);
	border-radius: 15rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.tabItem {
		height: 100%;
		flex: 1;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		color: #898989;
		position: relative;
	}

	.tabItem:last-child::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1rpx;
		height: 50rpx;
		background: #BBBBBB;
	}

	.active {
		position: relative;
		font-weight: bold;
		color: #3D3D3D;
	}

	.active::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 101rpx;
		height: 5rpx;
		background: #F364B3;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}
}