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

最新推荐文章于 2025-06-26 09:03:02 发布

原创最新推荐文章于 2025-06-26 09:03:02 发布 · 6.7k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

本文介绍了一种使用WXML实现的Tab栏切换效果案例，包括了四个标签页：上衣、裤子、套装和女鞋。通过绑定点击事件实现不同标签页的显示与隐藏，并且在样式上做了区分，使得当前选中的标签页更加醒目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

wxml:

   <!-- tab框 衣服 裤子 套装 女鞋 -->
  <view class="nav_title">
      <view class="nav_tab">
      <view wx:for="{{list}}" class="{{selected==index?'hidden':'show'}}" data-index='{{index}}' bindtap="selected">{{item}}
      <view class="{{selected==index?'nav_underline':''}}"></view>
      </view>
      </view>
      <!-- tab框显示内容 -->
      <view wx:if="{{selected == 0}}">aaa</view>
      <view wx:if="{{selected == 1}}">bbb</view>
      <view wx:if="{{selected == 2}}">ccc</view>
      <view wx:if="{{selected == 3}}">ddd</view>
</view>

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
      })
    }
  },