微信小程序 tab面板切换 伴随点击修改样式 tab下划线伪元素写法

<view class="tab">
   <view class="tab-item {{tabIndex == 1?'active':''}}" bindtap="clickTab" 
       data-index="1">本月未来店</view>
   <view class="tab-item {{tabIndex == 2?'active':''}}" bindtap="clickTab" 
       data-index="2">本月已来店</view>
</view>

小程序原生无法通过点击事件直接传值到方法里，因此设置data-xxx定义需要传输的值；

并在点击事件的方法里取值。

  clickTab(e) {
    let tabIndex = e.currentTarget.dataset.index;
    this.setData({
      categoryIndex:tabIndex,
      tabIndex:tabIndex
    })
  },

此时对应的字体active状态样式已经成功，但下划线UI样式有时无法用下边框来替代，因此这种情况我们使用伪元素。

 

.tab-item.active::after {
  position: absolute;
  bottom: -9rpx;
  content: '';
  width: 110rpx;
  height: 4rpx;
  background: #37DBE0;
  left: 50%;
  transform: translateX(-50%);
}

仅供参考，相似场景直接拿去使用比较方便快捷。