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;
	}
相关推荐
晓131311 分钟前
前端篇——番外篇 Bootstrap框架
前端·javascript·css·html
黑心的奥利奥12 分钟前
前端项目利用Gitlab CI/CD流水线自动化打包、部署云服务
前端·ci/cd·gitlab
墨菲安全17 分钟前
NPM组件 @ivy-shared-components/iconslibrary 等窃取主机敏感信息
前端·npm·node.js·npm组件投毒·主机敏感信息窃取·恶意npm包
Mintopia1 小时前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia1 小时前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn1 小时前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero1 小时前
基于vue3完成领域模型架构建设
前端
PanZonghui1 小时前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴1 小时前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss