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;
	}
相关推荐
dualven_in_csdn2 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅3 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
Jimmy4 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜5 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas
Allen Bright5 小时前
【CSS-9】深入理解CSS字体图标:原理、优势与最佳实践
前端·css
阿芯爱编程6 小时前
最长和谐子序列,滑动窗口
前端·javascript·面试