小程序实现顶部tab切换

1.小程序实现顶部tab切换

如图:

2.代码如下:

wxml:

      <view class="selectNav">
        <view class="nav-name selectNav_text {{item.typeId == currentId ? 'nav-hover':''}}" wx:for="{{section}}" wx:key="id" id='{{item.typeId}}' catchtap='handleTap'>
          {{item.name}}
        </view>
      </view>

js:

page({
	data:{
		currentId: '1',
	    section: [{
	      name: '全职',
	      typeId: '1'
	    }, {
	      name: '兼职',
	      typeId: '2'
	    }, {
	      name: '实习',
	      typeId: '3'
	    }],
	},
	handleTap: function(e) {
    	let id = e.currentTarget.id;
    	if(id){
      		this.setData({
        	currentId:id
      		})
    	}
  	}
})

css:

.selectNav{
  width: 50%;
  display:flex;
  justify-content: space-around;
  align-items: center;
}
.selectNav_text {
  font-size: 36rpx;
  color: #353535FF;
  font-weight: 400;
}
.nav-hover{
  color: #2E458BFF;
  font-size: 44rpx;
  font-weight:bold;
  border-bottom: 5px solid #F7CE00FF;
  /* text-shadow:0px #000;   */
}