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

直播商城源码，如何实现一个带图片的tabs导航栏
具体的需求有：

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

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

3，指示器跟随移动；

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

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

 
<template>
  <view ref="tabs" class="tabs">
    <view ref="tabsContent" class="tabs-content">
      <view
        v-for="(item, index) in list"
        :ref="'LEl_' + index"
        :class="['tabs-item', 'LEl_' + index, index == current ? 'active' : '']"
        @click="change(index)"
      >
        <div v-if="item.imgUrl">
          <u-image
            :src="item.imgUrl"
            :style="{
              height: index == current ? '56rpx' : '44rpx',
              width: getImgWidth(item.imgWidth, item.imgHeight, (index == current ? 56 : 44)) + 'rpx'
            }"
          >
          <div class="title" slot="loading">{{ item.title }}</div>
          <div class="title" slot="error">{{ item.title }}</div>
          </u-image>
        </div>
        <div v-else>
          {{item.title}}
        </div>
      </view>  
      <!-- 滑块 -->
      <view ref="scrollBar" class="u-scroll-bar"></view>  
    </view>
  </view>
</template>

<style lang="scss" scoped>
.tabs{
  box-sizing: border-box;
  overflow-x: scroll;
  background-color: #fff;
  .tabs-content{
    position: relative;
    width: max-content;
    min-width: 100%;
    padding: 22rpx 20rpx 20rpx;
    display: flex;
    align-items: flex-end;
    border-bottom: 2rpx solid #EEEEEE;
    .tabs-item{
      display: flex;
      align-items: flex-end;
      position: relative;
      bottom: 0;
      height: 56rpx;
      box-sizing: content-box;
      margin: 0 20rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #777;
      line-height: 44rpx;
      &.active{
        font-size: 40rpx;
        color: #111;
        font-weight: 500;
        line-height: 56rpx;
      }
      .title{
        font-size: 32rpx;
        font-weight: 400;
        color: #777;
        line-height: 44rpx;
      }
    }
  }
}
 
//
.u-scroll-bar{
  position: absolute;
  bottom: 8rpx;
  width: 18rpx;
  height: 8rpx;
  background: #C69C6D;
  border-radius: 4rpx;
  left: 0;
  transition: transform 200ms;
}
 
/deep/ .u-image__error{
  background-color: transparent;
}
 
</style>

以上就是直播商城源码，如何实现一个带图片的tabs导航栏， 更多内容欢迎关注之后的文章