案例展示

案例代码

<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;
	}
}