微信小程序实现tab选中（特殊圆角）样式

1.实现效果

tab.gif

2.实现原理

前3个常规设置即可，这里说下第四个样式

可以看到，这边有个超出的圆角样式。
两种思路：

• 将整个父元素设置线性渐变色背景，上下两部分。
• 设置单个元素的伪元素，伪元素部分设置径向渐变

思路一：

• 为父元素设置线性渐变背景

background: linear-gradient(180deg, #d6001f 50%, #fff 50%);

image.png

• 将子元素设置相应的border-radius，不同的背景色，这一步已经可以看到我们想要的特殊圆角了，接着把选中与不选中的颜色，设置与背景色一致即可。

image.png

• 最后得到的结果如下

image.png

思路二：

• 先正常写个圆角矩形

.web_tab1 {
  position     : relative;
  background   : #d6001f;
  border-radius: 10px 0 10px 0;
  z-index      : 10;
}

image.png

• 添加伪元素

.web_tab1::after {
  content   : "";
  position  : absolute;
  width     : 20px;
  height    : 20px;
  right     : -20px;
  top       : 0;
  background: radial-gradient(circle at 100% 100%, transparent 20px, #d6001f 21px);
}

image.png

设置正确的定位位置，结果如下：

image.png

当然，设置mask渐变等其他方法，也能实现同样效果。

3.实现代码

  
    
      {{item.name}}
    
  


  
    
      {{item.name}}
    
  


  
    
      {{item.name}}
    
  


  
    
      {{item.name}}
    
  


  
    
      {{item.name}}
    
  
  

// pages/cssCase/newTab/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tab: [
      {
        name: "选项一"
      },
      {
        name: "选项二"
      },
    ],
    nav_type: 0,
  },
  navTab(e) {
    let {
      index
    } = e.currentTarget.dataset;
    if (this.data.type === index || index === undefined) {
      return false;
    } else {
      this.setData({
        nav_type: index,
      })
    }
  },

 
})

page {
  background: linear-gradient(180deg, #c0e0e4 0%, #F4F4F4 100%);
  padding   : 20rpx;
}

.head_tab {
  width        : 450rpx;
  text-align   : center;
  height       : 85rpx;
  line-height  : 85rpx;
  display      : flex;
  background   : linear-gradient(180deg, #d6001f 50%, #fff 50%);
  border-radius: 20rpx 20rpx 0 0;
  color        : #ccc;
  font-size    : 30rpx;
  overflow     : hidden;

  &_four {
    border-radius: 20rpx;
  }

  .head_item {
    flex         : 1;
    text-align   : center;
    background   : #d6001f;
    color        : rgb(231, 199, 199);
    border-radius: 20rpx 20rpx 20rpx 0;
    text-shadow  : -1rpx 0 #fff, 0 1rpx #fff, 1rpx 0 #fff, 0 -1rpx #fff;

    &:last-child {
      border-radius: 20rpx 20rpx 0 20rpx;
    }

    &_active {
      background : #fff;
      color      : #333;
      text-shadow: -1rpx 0 #e98383, 0 1rpx #e98383, 1rpx 0 #e98383, 0 -1rpx #e98383;
    }
  }



}

.head_con {
  width        : 600rpx;
  height       : 250rpx;
  background   : #fff;
  border-radius: 0 20rpx 20rpx;
  box-shadow   : 5rpx 5rpx 5rpx rgba(235, 41, 70, 0.5);
}

.head_tab_one {
  width           : 450rpx;
  text-align      : center;
  height          : 85rpx;
  line-height     : 85rpx;
  display         : flex;
  border-radius   : 43rpx;
  color           : #ccc;
  font-size       : 30rpx;
  overflow        : hidden;
  background-color: #d6001f;

  .head_item {
    flex         : 1;
    border-radius: 43rpx;

    &_active {
      background-color: #fff;
    }
  }
}

.head_tab_two {
  width           : 450rpx;
  text-align      : center;
  height          : 85rpx;
  line-height     : 85rpx;
  display         : flex;
  border-radius   : 43rpx;
  color           : #ccc;
  font-size       : 30rpx;
  overflow        : hidden;
  background-color: #d6001f;

  .head_item {
    flex: 1;

    &_active {
      background-color: #fff;
    }
  }
}

.head_tab_three {
  width           : 450rpx;
  text-align      : center;
  height          : 85rpx;
  line-height     : 85rpx;
  display         : flex;
  border-radius   : 43rpx;
  color           : #ccc;
  font-size       : 30rpx;
  overflow        : hidden;
  background-color: #d6001f;
  padding         : 10rpx;
  box-sizing      : border-box;

  .head_item {
    flex           : 1;
    border-radius  : 43rpx;
    display        : flex;
    align-items    : center;
    justify-content: center;

    &_active {
      background-color: #fff;
    }
  }
}

4.完整代码，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！