【css实现自定义tab标签切换样式】微信小程序篇

项目需求：

切换tab选项卡改变边框及圆角样式：

---

实现思路：

（1）先给内容部分添加边框和下边框左右圆角：

border: 2px solid #00DCD5;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;

（2）给选中的tab标签添加样式.active;
（3）tab标签切换的时候，根据索引判断第一个tab选中时，给内容部分添加上边框右侧圆角；最后一个tab选中时给内容部分上边框左侧圆角；中间部分选中时，给内容部分添加上边框两侧圆角

<view class="tabs-content {{tabIndex === 0 ? 'rightRidus' : tabIndex === tabList.length-1 ? 'leftRadius' : 'topRadius'}}"">

实现代码如下：

index.wxml：

<view class="tabs">
  <!-- <image class="tabs-bg" src="../../images/home/{{bgObj[tabIndex]}}.png" /> -->
  <view class="tabs-title">
    <view
      wx:for="{{tabList}}"
      wx:key="index"
      class="title-item  {{item.isActive?'active':''}}"
      bindtap="handleItemTap"
      data-index="{{index}}"
      data-item ="{{item}}"
    >
      <view class="title-item-num">{{index + 1}}</view>
      <view class="title-item-name">{{item.name}}</view>
    </view>
  </view>
  <view class="tabs-content {{tabIndex === 0 ? 'rightRidus' : tabIndex === tabList.length-1 ? 'leftRadius' : 'topRadius'}}"">
    这里是内容部分
  </view>
</view>

index.wxss

.tabs-content{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px 4px 0;
    background: #ffffff;
    border: 2px solid #00DCD5;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}
.active{
  color:#00DCD5;
  background: #666;
  margin-bottom: -2px;
  border-style: solid;
  border-top-width: 2px;
  border-left-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 0px;
  border-top-color: #00DCD5;
  border-left-color: #00DCD5;
  border-right-color: #00DCD5;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.leftRadius{
    border-top-left-radius: 14px;
}
.rightRidus{
    border-top-right-radius: 14px;
}
.topRadius{
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}