wxml:

<viewclass="tab_box"catchtap="changeOil"> <viewclass='{{num==1?"tab_box_1":"tab_box_1a"}}'data-num='1'>門店自提</view> <viewclass='{{num==2?"tab_box_2":"tab_box_2a"}}'data-num='2'>同城快送</view> </view> 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,00,0bottom,from(#ffffff),to(#ffffff)); background-image:-webkit-gradient(linear,00,0100%,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:bottomleft; } .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,00,0bottom,from(#ffffff),to(#ffffff)); background-image:-webkit-gradient(linear,00,0100%,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:bottomright; } /*未點選的樣式*/ .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