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.实现代码
<!--pages/cssCase/newTab/index.wxml-->
<view class="mb20">
<view class="head_tab_one ">
<block wx:for="{{tab}}" wx:key="tab">
<view catchtap="navTab" class=" head_item {{index==nav_type&&'head_item_active'}}" data-index="{{index}}">{{item.name}}</view>
</block>
</view>
</view>
<view class="mb20">
<view class="head_tab_two ">
<block wx:for="{{tab}}" wx:key="tab">
<view catchtap="navTab" class=" head_item {{index==nav_type&&'head_item_active'}}" data-index="{{index}}">{{item.name}}</view>
</block>
</view>
</view>
<view class="mb20">
<view class="head_tab_three ">
<block wx:for="{{tab}}" wx:key="tab">
<view catchtap="navTab" class=" head_item {{index==nav_type&&'head_item_active'}}" data-index="{{index}}">{{item.name}}</view>
</block>
</view>
</view>
<view class="mb20">
<view class="head_tab head_tab_four ">
<block wx:for="{{tab}}" wx:key="tab">
<view catchtap="navTab" class=" head_item {{index==nav_type&&'head_item_active'}}" data-index="{{index}}">{{item.name}}</view>
</block>
</view>
</view>
<view class="mb20">
<view class="head_tab ">
<block wx:for="{{tab}}" wx:key="tab">
<view catchtap="navTab" class=" head_item {{index==nav_type&&'head_item_active'}}" data-index="{{index}}">{{item.name}}</view>
</block>
</view>
<view class="head_con"></view>
</view>
// 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;
}
}
}
