同城快送
wxss:
.tab_box{
width: 750rpx;
position: relative;
height: 100rpx;
margin-top: 10rpx;
}
.tab_box_1{
position: absolute;
width: 53%;
text-align: center;
height: 100rpx;
line-height: 120rpx;
color: #f47767;
font-size: 30rpx;
display: inline-block;
}
.tab_box_1::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform: perspective(2em) rotateX(4deg);
background: -webkit-gradient(linear,0 0,0 bottom, from(#ffffff),to(#ffffff));
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(255, 255, 255)), to(rgb(255, 255, 255)));
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
transform-origin: bottom left;
}
.tab_box_2{
position: absolute;
float: right;
right: 0;
width: 53%;
text-align: center;
height: 100rpx;
line-height: 120rpx;
color: #f47767;
font-size: 30rpx;
display: inline-block;
}
.tab_box_2::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform: perspective(2em) rotateX(4deg);
background: -webkit-gradient(linear,0 0,0 bottom, from(#ffffff),to(#ffffff));
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(255, 255, 255)), to(rgb(255, 255, 255)));
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
transform-origin: bottom right;
}
/* 未点击的样式 */
.tab_box_1a{
position: absolute;
width: 53%;
text-align: center;
height: 100rpx;
line-height: 120rpx;
color: #777;
font-size: 30rpx;
}
.tab_box_2a{
position: absolute;
float: right;
right: 0;
width: 53%;
text-align: center;
height: 100rpx;
line-height: 120rpx;
color: #777;
font-size: 30rpx;
}
js:
data: {
num:1,
}
// 切换自提跟快送
changeOil:function(e){
wx.showLoading({
title: '加载中',
})
setTimeout(function () {
wx.hideLoading()
}, 500)
this.setData({
num:e.target.dataset.num
})
},
个别view需要不同展示，wxml里面这样改class='{{num==2?"flow-delivery":"disp_none"}}'
wxss：
.disp_none{
display: none;
}
就可以分别点击之后显隐不一样的view了
参考链接：https://blog.csdn.net/chendongpu/article/details/114132915