css class 多种规则判断样式

需求

商品分类选择变量 上下的分类需要添加圆角 这个就设计到多个分类的判断 

解决方法

在class里面多写些判断 判断上下的分类 做成圆角即可

代码

<!-- html -->				
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="`${current == index ? 'u-tab-item-active' : ''}
	${current > 0 && current - 1 == index ? 'radius-bottom' : ''} 
	${current < tabbar.length - 1 && current + 1 == index ? 'radius-top' : ''}`" 
				 @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{item.name}}</text>
				</view>

// css
	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 6px solid $u-primary;
		border-radius: 15rpx;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}
	.radius-top {
		border-top-right-radius: 30rpx;
	}
	.radius-bottom {
		border-bottom-right-radius: 30rpx;
	}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

新生代农民工-小王八

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值