微信小程序 4个tab框切换分类

效果图

wxml:

   
  
      
      {{item}}
      
      
      
      
      aaa
      bbb
      ccc
      ddd
 

wxss:

/*tab框切换*/
.nav_tab{
  width:100%;
  height:100rpx;
  display:flex;
  flex-direction:row;
}
.show{
  line-height:100rpx;
  text-align:center;
  flex:1;
  color:#333333;
  font-size:28rpx;
  opacity: 0.5;
}
.hidden{
  line-height:100rpx;
  text-align:center;
  color:#ef9ba8;
  flex:1;
  font-size:28rpx;
}
.nav_underline{
  background:#ef9ba8;
  width:54rpx;
  height:6rpx;
  margin-top:-10rpx;
  margin-left:70rpx;
  border-radius:8rpx;
}

js:

data:{
    //tab框
    selected: 0,
    list: ['上衣','裤子','套装','女鞋']
}

 //tab框
  selected: function (e) {
    console.log(e)
    let that= this
    let index = e.currentTarget.dataset.index
    console.log(index)
    if( index == 0){  
      that.setData({
        selected: 0
      })
    }else if( index == 1) {
      that.setData({
        selected: 1
      })
    }else if(index == 2 ){
      that.setData({
        selected: 2
      })
    }else{
      that.setData({
        selected: 3
      })
    }
  },