WeChat Mini Program Tabs tab bar

The Tabs tab bar is required for the recent project, and the Vant Weapp component library is used in the project, but the tabs in the vant do not meet the requirements of the project. Therefore, a custom component is used.

Effect:

.wxml

<scroll-view class='component cus' scroll-x="{
  
   
   { isScroll }}">
  <view class='content'>
    <view class='item' data-cus="{
  
   
   { dataCus[index] }}" data-index="{
  
   
   { index }}" data-value="{
  
   
   { item }}" wx:for="{
  
   
   { items }}" wx:key="index" wx:for-item="item" style='min-width: {
  
   
   { itemWidth }}rpx; height: {
  
   
   { height }}rpx' catchtap='onItemTap'>
      <text class='text' style='color: {
  
   
   { mSelected == index ? selectTextColor : textColor }};font-size: {
  
   
   { textTopSize }