tarotabs,taro菜单自动居中

当我有多个菜单的时候我需要点击到后面菜单时自动向前移动，让用户知道后面还有菜单，taroUI的tabs可以实现但是没有办法加图片，以下是代码

   <View className='my-tab flex flex-align-item-center'
                >
                  <ScrollView
                    scrollX
                    scroll-with-animation
                    scrollLeft={scrollLeft}
                    enhanced
                    show-scrollbar={false}
                  >
                    <View className='my-tab-container flex flex-align-item-center'
                    >
                      {
                        tabs.map((tab, index) => <View key={index} className={current === index ? 'tab-item  active' : "tab-item "} onClick={() => changeTab(index)}>
                          <View className='tab-item-text'>
                            <Image
                              style={{
                                width: index === 0 ? '18px' : index == 1 ? '24px' : index == 2 ? '20px' : index == 3 ? '23px' : index == 4 ? '20px' : index == 5 ? '20px' : '24px',
                                height: index === 0 ? '19px' : index == 1 ? '24px' : index == 2 ? '18px' : index == 3 ? '18px' : index == 4 ? '16px' : index == 5 ? '17px' : '24px'
                              }}
                              className='img'
                              src={imgs[index]}
                            ></Image>
                            <Text>{tab.text}</Text>
                          </View>
                          <View className='line'></View>
                        </View>)
                      }
                    </View>
                  </ScrollView>
                </View>

需要用到的数组
const tabs = [
    {
      text: '一',
      img: 'xxx',
    
    },
    {
      text: '二',
      img: 'xxx',
     
    },
    {
      text: '三',
      img: 'xxx',
      
    },
    {
      text: '四',
      img: 'xxx',
      
    },

    {
      text: '五',
      img: 'xxx',
      
    },
    {
      text: '六',
      img: 'xxx',
     
    },
    {
      text: '七',
      img: 'xxx',
      
    },
    {
      text: '八',
      img: 'xxx',
     
    },
    {
      text: '九',
      img: 'xxx',
    },
  ]


//这里是处理tab滚动
 const [scrollLeft, setScrollLeft] = useState<number>(0)
  const handleScroll = (current: number) => {
    let moveX = 0
    const { screenWidth } = Taro.getSystemInfoSync()
    if (current > 1 && current < tabs.length - 1) {
      moveX = current * (screenWidth / 4 / 2 + current * 4)
    } else if (current >= tabs.length - 1) {
      moveX = tabs.length * (screenWidth / 4)
    }
    setScrollLeft(moveX)
  }

样式

 .my-tab {
    height: 88px;
    width: 100%;
    line-height: 88px;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 999;

    .my-tab-container {
      width: 100%;
      transition: transform 0.3s ease;
    }

    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
      display: none;
    }

    .tab-item {
      text-align: center;
      font-size: 28px;
      color: #666667;
      white-space: nowrap;
      // padding: 0 40rpx;
      min-width: 25%;
      .img{
        vertical-align: middle;
        margin-right: 6rpx;
        z-index: 4;
        position: relative;
      }

      &.active {
        color: #333333;
        font-weight: bold;
        font-size: 36px;

        .tab-item-text {
          position: relative;
          display: inline-block;
          z-index: 3;
          vertical-align: middle;

          text {
            position: relative;
            z-index: 4;
            vertical-align: middle;
          }

          &:before {
            position: absolute;
            z-index: 2;
            content: "";
            width: 110%;
            height: 12px;
            border-radius: 12px;
            background-color: $PrimaryColor;
            bottom: 18px;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }

  .my-tab::-webkit-scrollbar {
    display: none;
  }