更新记录

1.0.0（2024-11-21） 下载此版本

新发布组件

平台兼容性

hbxw-tab选项卡组件

介绍

一个支持UI自定义的选项卡组件

使用示例

使用前要以新建一个页面拷贝下面代码做一下测试，熟悉后再使用到项目中

<template>
  <!-- 默认UI -->
  <text class="title">默认UI</text>
    <hbxw-tab 
    class="tab-item-wrap" 
    :list="list" 
    v-model:activeIndex="activeIndex" 
    @change="tabChange"
  ></hbxw-tab>

  <!-- 通过配置调整UI -->
  <text class="title">通过配置调整UI</text>
  <hbxw-tab 
    class="tab-item-wrap" 
    :list="list" 
    v-model:activeIndex="activeIndex" 
    @change="tabChange"
    textColor="#ccc"
    activeTextColor="red"
    tagStyle="background-color: green;height: 5rpx;"
  ></hbxw-tab>

  <!-- 自定义UI0 -->
  <text class="title">自定义UI0</text>
  <hbxw-tab 
    class="tab-item-wrap-capsule" 
    :list="list" 
    v-model:activeIndex="activeIndex"
    @change="tabChange1"
  >
    <template #tabitem="{item, index, isActive}">
      <view class="tab-item-capsule" :class="{active: isActive }">
        <text class="tab-item-capsule-text">{{item.text}}</text>
      </view>
    </template>
  </hbxw-tab>

  <!-- 自定义UI1 -->
  <text class="title">自定义UI1</text>
  <hbxw-tab 
    class="tab-item-wrap-box" 
    :list="list" 
    v-model:activeIndex="activeIndex"
    @change="tabChange2"
   >
    <template #tabitem="{item, index, isActive, activeIndex}">
      <view 
        class="tab-item-box" 
        :class="{active: isActive,  'tab-item-box-nobd':activeIndex - 1 === index || index === list.length - 1}"
      >
        <text class="tab-item-box-text">{{item.text}}</text>
      </view>
    </template>
  </hbxw-tab>
</template>

<script>
    export default {
        data() {
            return {
                list: [
          {
            text: 'tab1'
          },{
            text: '我是中间的tab2，我文本很长哦'
          },{
            text: 'tab3'
          },{
            text: 'tab4'
          }
        ],
        activeIndex: 1
            }
        },
    watch: {
      activeIndex(newVal){
        console.log('---- activeIndex ----:hbxwtabpage',  newVal);
      }
    },
        methods: {
            tabChange(index) {
        console.log('---- tabChange ----:hbxwtabpage',  index);
      },
            tabChange1(index) {
        console.log('---- tabChange1 ----:hbxwtabpage',  index);
      },
      tabChange2(index) {
        console.log('---- tabChange2 ----:hbxwtabpage',  index);
      },
        }
    }
</script>

<style lang="scss">
  .title{
    display: flex;
    margin: 20rpx 0;
    font-weight: bold;
  }
.tab-item-wrap{
  width: 100%;
  display: flex;
}

/* tab样式1 */
.tab-item-wrap-capsule{
   margin: 0 auto;
   width: 654rpx;
   height: 89rpx;
   padding:0 13rpx;
   border-radius: 45rpx;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   background-color: #F5F5F5;
}
.tab-item-capsule{
  height: 64rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 90%;
  box-sizing: border-box;
  padding:0 18rpx;
  border-radius: 32rpx;
  background-color: white;
  &.active{
    background-color: #363636;
    .tab-item-capsule-text{
      color: #AAF24E;
    }
  }
  .tab-item-capsule-text{
    width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 30rpx;
    color: #4F4F4F;
  }
}

// tab样式2
.tab-item-wrap-box{
  width: 702rpx;
  margin: 0 auto;
  height: 76rpx;
  display: flex;
  flex-direction:row;
  align-items: flex-end;
  background-color: #F6F7F9;
  border-radius: 28rpx 28rpx 0 0;
}
.tab-item-box{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 76rpx;
  border-right: 1px solid #DDD3D6;
  &.tab-item-box-nobd{
    border-right: 0;
  }
  &.active{
    height: 84rpx;
    border-radius: 28rpx 28rpx 0 0;
    background-color: #FEFEFE;
    box-shadow: 0px -6rpx 20rpx 0px rgba(156,157,162,0.28);
    border-right: 0;
  }
  .tab-item-box-text{
    width: 100%;
    box-sizing: border-box;
    padding:0 10rpx;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 26rpx;
    color: #121419;
  }
}
</style>

API

Props

Events