css class 多种规则判断样式

需求

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

解决方法

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

代码

html 复制代码
<!-- 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;
	}
相关推荐
军军君014 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具一:系统需求分析及设计
前端·vue.js·人工智能·spring boot·后端·uni-app·node.js
神仙别闹1 小时前
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
前端·后端·asp.net
步行cgn6 小时前
Vue 中的数据代理机制
前端·javascript·vue.js
GH小杨6 小时前
JS之Dom模型和Bom模型
前端·javascript·html
星月心城7 小时前
JS深入之从原型到原型链
前端·javascript
你的人类朋友7 小时前
🤔Token 存储方案有哪些
前端·javascript·后端
烛阴7 小时前
从零开始:使用Node.js和Cheerio进行轻量级网页数据提取
前端·javascript·后端
liuyang___7 小时前
日期的数据格式转换
前端·后端·学习·node.js·node
字节逆旅8 小时前
老板说15分钟内把这个样式改好
css
贩卖纯净水.8 小时前
webpack其余配置
前端·webpack·node.js