顶部选项卡插件选中含有下划线

直接上代码：

<!--components->

<view class="index_tab">

  <scroll-view class="searchHeader-tab bottom_scroll" hidden="{{showTab}}" scroll-x="true" scroll-left="{{x}}" scroll-with-animation="{{true}}">

      <view wx:for="{{sortArray}}" wx:key="sortArray" class="nav searchHeader-tab-li {{(index == ischoose)?'active':''}}" data-ischoose="{{index}}" catchtap="ischooseChange" >{{item}}</view>

  </scroll-view>

</view>

Component({

  /**

   * 组件的属性列表

   */

  properties: {

    showTab:{type:Boolean,value: false},

    sortArray:{type:Array,value: []},

  },

 

  /**

   * 组件的初始数据

   */

  data: {

    ischoose:0,

  },

 

  /**

   * 组件的方法列表

   */

  methods: {

    ischooseChange:function(e){

      let screenWidth = wx.getSystemInfoSync().windowWidth;

      let itemWidth = screenWidth/5;

      let { ischoose } = e.currentTarget.dataset;

      const { sortArray } = this.data;

      let scrollX = itemWidth * ischoose - itemWidth*2 -30;

      let maxScrollX = (sortArray.length+1) * itemWidth;

      if(scrollX<0){

        scrollX = 0;

      } else if (scrollX >= maxScrollX){

        scrollX = maxScrollX;

      }

      this.setData({

        x: scrollX,

        ischoose:e.target.dataset.ischoose

      })

      this.triggerEvent('ischooseChange', e.target.dataset.ischoose);

    }

   

  }

    

})

.searchHeader-tab {

  width: 88%;

  white-space: nowrap;

  overflow: hidden;

  height: 101rpx;

  display: flex;

  padding:0 30rpx;

  box-shadow: 0px 0px 12rpx 4rpx rgba(102, 102, 102, 0.06);

}

 

.searchHeader-tab .searchHeader-tab-li {

  white-space: nowrap;

  display: inline-block;

  position: relative;

  height: 88rpx;

  line-height: 88rpx;

  z-index: 1;

 

  font-size: 28rpx;

  font-family:" PingFang SC Heavy, PingFang SC Heavy-Heavy";

  font-weight: 800;

  text-align: center;

  color: #ffffff;

  width: 20%;

}

 

.active {

  width: 122rpx;

  font-size: 28rpx;

  font-family: "PingFang SC Heavy, PingFang SC Heavy-Heavy";

  font-weight: 800;

  text-align: center;

  color: #ffffff;

  

}

 

.searchHeader-tab .active:after {

  content: "";

  width: 122rpx;

  height: 10rpx;

  background:#ffffff;

  border-radius: 5rpx;

  position: absolute;

  z-index: -1;

  bottom: 0rpx;

  left: 50%;

  transform: translateX(-50%);

}

后期发demo，到这里吧

效果图