H5-Merchant/pages/supplychainon/tablist.vue

<template>
  <view class="content">
    <view class="nav">
      <!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
      <scroll-view
        class="tab-scroll"
        scroll-x="true"
        scroll-with-animation
        :scroll-left="scrollLeft"
      >
        <view class="tab-scroll_box" :style="{'justify-content': category.length <= 3 ? 'space-around' : 'flex-start'}">
          <!-- 选项卡类别列表 -->
          <view
            class="tab-scroll_item"
            v-for="(item, index) in category"
            :key="index"
            :class="{ active: isActive == index }"
            @click="chenked(index, item)"
          >
            <view class="tile-box">
              <text class="name-box">{{ item.name }}</text>
              <text class="count">
                {{ item.count || 0 }}
              </text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    category: {
      type: Array,
      default: () => []
    },
    isShowNumber: {
      type: Boolean,
      default: true
    },
    curruntActive: {
      type: [Number, String],
      default: 0
    }
  },
  watch: {
    // swiper与上面选项卡联动
    currentindex(newval) {
      this.isActive = newval;
      this.scrollLeft = 0;
      // 滑动swiper后，每个选项距离其父元素最左侧的距离
      for (let i = 0; i < newval - 1; i++) {
        this.scrollLeft += this.category[i].width;
      }
    }
  },
  data() {
    return {
      isActive: 0,
      index: 0,
      currentindex: 0,

      contentScrollW: 0, // 导航区宽度
      scrollLeft: 0, // 横向滚动条位置
      fullHeight: ""
    };
  },
  mounted() {
    var that = this;
    this.isActive = this.curruntActive;
    //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
    uni.getSystemInfo({
      success: function (res) {
        that.fullHeight = "height:" + res.windowHeight + "px";
      }
    });
    // 获取标题区域宽度，和每个子元素节点的宽度
    this.getScrollW();
  },
  methods: {
    // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
    getScrollW() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".tab-scroll")
        .boundingClientRect((data) => {
          this.contentScrollW = data.width;
        })
        .exec();
      query
        .selectAll(".tab-scroll_item")
        .boundingClientRect((data) => {
          let dataLen = data.length;
          for (let i = 0; i < dataLen; i++) {
            this.category[i].left = data[i].left;
            this.category[i].width = data[i].width;
          }
        })
        .exec();
    },
    // 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
    chenked(index, item) {
      this.isActive = index;
      this.scrollLeft = 0;
      for (let i = 0; i < index - 1; i++) {
        this.scrollLeft += this.category[i].width;
      }
      this.$emit("tabs", { index, item });
    },
    // swiper滑动时，获取其索引，也就是第几个
    change(e) {
      const { current } = e.detail;
      this.currentindex = current;
    }
  }
};
</script>
<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  .nav {
    background-color: #fff;
    // position: fixed;
    z-index: 99;
    width: 100%;
    align-items: center;
    // min-height: 40rpx;
    .tab-scroll {
      flex: 1;
      overflow: hidden;
      box-sizing: border-box;
      padding-left: 30rpx;
      padding-right: 30rpx;
      .tab-scroll_box {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        box-sizing: border-box;
        // height: 100rpx;
        .tab-scroll_item {
          // line-height: 60rpx;
          margin-right: 35rpx;
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          font-size: 30rpx;
          padding-top: 10rpx;
          color: #333;
          .tile-box {
            display: flex;
            align-items: center;
            flex-direction: column;
			.name-box{
				
			}
            .count {
               padding: 13rpx 0;
			 
            }
          }
        }
      }
    }
  }
  .swiper-content {
    padding-top: 120rpx;
    // flex: 1;
    .swiperitem-content {
      background-color: #ffffff;
      .nav_item {
        background-color: #ffffff;
        padding: 20rpx 40rpx 0rpx 40rpx;
      }
    }
  }
}
.active {
  position: relative;
  color: #1f7cff !important;
  font-weight: 600;
}
.active::after {
  content: "";
  position: absolute;
  width: 50rpx;
  height: 8rpx;
  background-color: #1f7cff;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  border-radius: 8rpx;
  margin-top: 10rpx;
  transition: all 0.3s;
}
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
/deep/.uni-scroll-view::-webkit-scrollbar {
  display: none;
}
</style>