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

原文地址：https://blog.csdn.net/Little___Turtle/article/details/140601085

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！