直播商城源码，如何实现一个带图片的tabs导航栏

具体的需求有：

1，导航数据中如果选项图片不为空，则显示图片不显示文字；

2，选中项文字凸显，是图片的情况，图片尺寸变大；

3，指示器跟随移动；

接到需求翻了下资料，没找到有现成的框架可以用，基本都是纯文字的导航功能，看来只能自己写一个了。

先上代码结构和样式代码：

<br> <br><template><br>  <view ref="tabs"><br>    <view ref="tabsContent"><br>      <view<br>        v-for="(item, index) in list"<br>        :ref="'LEl_' + index"<br>        :class="['tabs-item', 'LEl_' + index, index == current ? 'active' : '']"<br>        @click="change(index)"<br>      ><br>        <div v-if="item.imgUrl"><br>          <u-image<br>            :src="item.imgUrl"<br>            :style="{<br>              height: index == current ? '56rpx' : '44rpx',<br>              width: getImgWidth(item.imgWidth, item.imgHeight, (index == current ? 56 : 44)) + 'rpx'<br>            }"<br>          ><br>          <div slot="loading">{{ item.title }}</div><br>          <div slot="error">{{ item.title }}</div><br>          </u-image><br>        </div><br>        <div v-else><br>          {{item.title}}<br>        </div><br>      </view>  <br>      <!-- 滑块 --><br>      <view ref="scrollBar"></view>  <br>    </view><br>  </view><br></template><br><style scoped><br>.tabs{<br>  box-sizing: border-box;<br>  overflow-x: scroll;<br>  <br>  .tabs-content{<br>    position: relative;<br>    width: max-content;<br>    min-width: 100%;<br>    padding: 22rpx 20rpx 20rpx;<br>    display: flex;<br>    align-items: flex-end;<br>    border-bottom: 2rpx solid #EEEEEE;<br>    .tabs-item{<br>      display: flex;<br>      align-items: flex-end;<br>      position: relative;<br>      bottom: 0;<br>      height: 56rpx;<br>      box-sizing: content-box;<br>      margin: 0 20rpx;<br>      font-size: 32rpx;<br>      font-weight: 400;<br>      color: #777;<br>      line-height: 44rpx;<br>      &.active{<br>        font-size: 40rpx;<br>        color: #111;<br>        font-weight: 500;<br>        line-height: 56rpx;<br>      }<br>      .title{<br>        font-size: 32rpx;<br>        font-weight: 400;<br>        color: #777;<br>        line-height: 44rpx;<br>      }<br>    }<br>  }<br>}<br> <br>//<br>.u-scroll-bar{<br>  position: absolute;<br>  bottom: 8rpx;<br>  width: 18rpx;<br>  height: 8rpx;<br>  background: #C69C6D;<br>  border-radius: 4rpx;<br>  left: 0;<br>  transition: transform 200ms;<br>}<br> <br>/deep/ .u-image__error{<br>  background-color: transparent;<br>}<br> <br></style>