h-uni

Appearance

HTab 标签栏 ​

介绍 ​

此组件，是一个 tabs 标签组件，具有自动滚动，滑块自动滑动等功能

并且支持垂直布局，水平布局，因此此组件可使用的场景非常多：左侧分类栏、顶部标签栏.....

激活的 tab 会自动移动到组件的中间位置，标签少的时候，可以禁止滑动。

有丰富的自定义属性，插槽满足不同的业务需求

兼容性 ​

⚪:未测试✅:支持❌:不支持/有部分功能不支持
平台H5微信支付宝百度抖音飞书APP
支持性✅✅✅✅✅✅⚪

使用 ​

基础用法 ​

在HTab内嵌套HTabItem,为HTabItem绑定value和label值

HTab通过v-model绑定变量，即可获取当前选中HTabItem的value

预览
vue
<template>
  <view class="box">
    <HTab
      v-model="active"
      direction="y"
    >
      <HTabItem
        v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
        :key="index"
        :value="index"
        :label="`套餐${item}`"
      />
    </HTab>
    <view class="container">
      套餐 {{ active + 1 }}
    </view>
  </view>
</template>
<template>
  <view class="box">
    <HTab
      v-model="active"
      direction="y"
    >
      <HTabItem
        v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
        :key="index"
        :value="index"
        :label="`套餐${item}`"
      />
    </HTab>
    <view class="container">
      套餐 {{ active + 1 }}
    </view>
  </view>
</template>
vue
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';

export default defineComponent({
  data() {
    return {
      active: 0,
    };
  },
});
</script>
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';

export default defineComponent({
  data() {
    return {
      active: 0,
    };
  },
});
</script>
vue
<style lang='scss' scoped>
.box {
  display: flex;

  .container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: bolder;
    font-size: 100rpx;
  }
}
</style>
<style lang='scss' scoped>
.box {
  display: flex;

  .container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: bolder;
    font-size: 100rpx;
  }
}
</style>

布局方向 ​

  • HTab属性direction决定标签页内选项卡的排列方式
  • HTabItem属性direction决定选项卡内文字和图盘的排列方式：y 垂直布局；x:水平布局；

下面的示例中:通过两个单选按钮组控制HTab和HTabItem组件的direction

预览
vue
<template>
  <view class="box">
    <!-- directions data -->
    <view class="data">
      HTab direction= {{ tabDirection }}
      <uni-data-checkbox
        v-model="tabDirection"
        mode="button"
        :localdata="directions"
        @change="resize"
      />
      HTabItem direction= {{ tabItemDirection }}
      <uni-data-checkbox
        v-model="tabItemDirection"
        mode="button"
        :localdata="directions"
        @change="resize"
      />
    </view>
    <!-- tab -->
    <HTab
      ref="tab"
      v-model="active"
      :direction="tabDirection"
    >
      <HTabItem
        v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
        ref="tabItem"
        :key="index"
        :direction="tabItemDirection"
        :value="index"
        :label="`套餐${item}`"
        image="/static/logo-shadow.png"
      />
    </HTab>
  </view>
</template>
<template>
  <view class="box">
    <!-- directions data -->
    <view class="data">
      HTab direction= {{ tabDirection }}
      <uni-data-checkbox
        v-model="tabDirection"
        mode="button"
        :localdata="directions"
        @change="resize"
      />
      HTabItem direction= {{ tabItemDirection }}
      <uni-data-checkbox
        v-model="tabItemDirection"
        mode="button"
        :localdata="directions"
        @change="resize"
      />
    </view>
    <!-- tab -->
    <HTab
      ref="tab"
      v-model="active"
      :direction="tabDirection"
    >
      <HTabItem
        v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
        ref="tabItem"
        :key="index"
        :direction="tabItemDirection"
        :value="index"
        :label="`套餐${item}`"
        image="/static/logo-shadow.png"
      />
    </HTab>
  </view>
</template>
vue
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';
import { HTab } from '../../packages/components';

export default defineComponent({
  data() {
    return {
      active: 0,
      tabDirection: 'y',
      tabItemDirection: 'y',

      directions: [
        {
          value: 'y',
          text: 'y',
        },
        {
          value: 'x',
          text: 'x',
        },
      ],
    };
  },
  methods: {
    resize() {
      // tab尺寸发生变化需要重新计算tab尺寸
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
      (this.$refs.tab as InstanceType<typeof HTab>).resize();
    },
  },
});
</script>
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';
import { HTab } from '../../packages/components';

export default defineComponent({
  data() {
    return {
      active: 0,
      tabDirection: 'y',
      tabItemDirection: 'y',

      directions: [
        {
          value: 'y',
          text: 'y',
        },
        {
          value: 'x',
          text: 'x',
        },
      ],
    };
  },
  methods: {
    resize() {
      // tab尺寸发生变化需要重新计算tab尺寸
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
      (this.$refs.tab as InstanceType<typeof HTab>).resize();
    },
  },
});
</script>
vue
<style lang='scss' scoped>
.box {
  .data {
    position: absolute;
    bottom: 30rpx;
    right: 30rpx;
    padding: 30rpx;
  }
}
</style>
<style lang='scss' scoped>
.box {
  .data {
    position: absolute;
    bottom: 30rpx;
    right: 30rpx;
    padding: 30rpx;
  }
}
</style>

滑块样式 ​

  • activeAspect更改滑块的朝向,你可以根据实际内容位置和标签栏的布局更改滑块的开口方向,可选值：none,left, right, top, bottom

  • activeDurations设置滑块过渡时间(单位:ms)

  • activeBackgroundColor设置滑块的背景颜色

  • activeStyle用于自定义滑块的样式

此外，你还可以使用具名插槽active用来自定义滑块的内容

滑块背景颜色

当activeAspect不为none时，使用activeStyle设置background-color并不完全更改滑块背景颜色，需要使用activeBackgroundColor属性进行更改

预览
vue
<template>
  <view>
    <!-- 滑块的朝向 -->
    <uni-section
      title="滑块的朝向"
      type="line"
    >
      <view class="flex_box">
        <!-- none -->
        <HTab
          v-model="active"
          height="100px"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            :value="index"
            label="none"
          />
        </HTab>

        <!-- left -->
        <HTab
          v-model="active"
          active-aspect="left"
          height="100px"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            :value="index"
            label="left"
          />
        </HTab>

        <!-- right -->
        <HTab
          v-model="active"
          active-aspect="right"
          height="100px"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            :value="index"
            label="right"
          />
        </HTab>
      </view>

      <!--top -->
      <HTab
        v-model="active"
        direction="x"
        active-aspect="top"
        style="margin-top: 20rpx;"
      >
        <HTabItem
          v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
          :key="index"
          :value="index"
          label="top"
        />
      </HTab>

      <!-- bottom -->
      <HTab
        v-model="active"
        direction="x"
        active-aspect="bottom"
        style="margin-top: 20rpx;"
      >
        <HTabItem
          v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
          :key="index"
          :value="index"
          label="bottom"
        />
      </HTab>
    </uni-section>

    <view class="flex_box">
      <uni-section
        title="设置过渡时间"
        type="line"
      >
        <!-- 设置过渡时间 -->
        <HTab
          v-model="active"
          height="200px"
          :active-duration="2000"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            :value="index"
            label="过渡时间"
          />
        </HTab>
      </uni-section>

      <uni-section
        title="设置背景颜色"
        type="line"
      >
        <!-- 设置背景颜色 -->
        <HTab
          v-model="active"
          height="200px"
          active-background-color="rgb(145, 145, 205)"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            :value="index"
            label="背景颜色"
          />
        </HTab>
      </uni-section>

      <uni-section
        title="自定义样式"
        type="line"
      >
        <!-- 自定义样式 -->
        <HTab
          v-model="active"
          height="200px"
          width="130px"
          active-aspect="left"
          :active-style="{
            width: '125px',
            borderLeft: '5px solid rgb(145, 145, 205)',
            borderRadius: 0,
          }"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] "
            :key="index"
            :value="index"
            label="自定义样式"
          />
        </HTab>
      </uni-section>
    </view>
  </view>
</template>
<template>
  <view>
    <!-- 滑块的朝向 -->
    <uni-section
      title="滑块的朝向"
      type="line"
    >
      <view class="flex_box">
        <!-- none -->
        <HTab
          v-model="active"
          height="100px"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            :value="index"
            label="none"
          />
        </HTab>

        <!-- left -->
        <HTab
          v-model="active"
          active-aspect="left"
          height="100px"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            :value="index"
            label="left"
          />
        </HTab>

        <!-- right -->
        <HTab
          v-model="active"
          active-aspect="right"
          height="100px"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            :value="index"
            label="right"
          />
        </HTab>
      </view>

      <!--top -->
      <HTab
        v-model="active"
        direction="x"
        active-aspect="top"
        style="margin-top: 20rpx;"
      >
        <HTabItem
          v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
          :key="index"
          :value="index"
          label="top"
        />
      </HTab>

      <!-- bottom -->
      <HTab
        v-model="active"
        direction="x"
        active-aspect="bottom"
        style="margin-top: 20rpx;"
      >
        <HTabItem
          v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
          :key="index"
          :value="index"
          label="bottom"
        />
      </HTab>
    </uni-section>

    <view class="flex_box">
      <uni-section
        title="设置过渡时间"
        type="line"
      >
        <!-- 设置过渡时间 -->
        <HTab
          v-model="active"
          height="200px"
          :active-duration="2000"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            :value="index"
            label="过渡时间"
          />
        </HTab>
      </uni-section>

      <uni-section
        title="设置背景颜色"
        type="line"
      >
        <!-- 设置背景颜色 -->
        <HTab
          v-model="active"
          height="200px"
          active-background-color="rgb(145, 145, 205)"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :key="index"
            :value="index"
            label="背景颜色"
          />
        </HTab>
      </uni-section>

      <uni-section
        title="自定义样式"
        type="line"
      >
        <!-- 自定义样式 -->
        <HTab
          v-model="active"
          height="200px"
          width="130px"
          active-aspect="left"
          :active-style="{
            width: '125px',
            borderLeft: '5px solid rgb(145, 145, 205)',
            borderRadius: 0,
          }"
        >
          <HTabItem
            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] "
            :key="index"
            :value="index"
            label="自定义样式"
          />
        </HTab>
      </uni-section>
    </view>
  </view>
</template>
vue
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';

export default defineComponent({
  data() {
    return {
      active: 0,
    };
  },
});
</script>
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';

export default defineComponent({
  data() {
    return {
      active: 0,
    };
  },
});
</script>
vue
<style lang='scss' scoped>
.flex_box {
  display: flex;
  justify-content: space-between;
}
</style>
<style lang='scss' scoped>
.flex_box {
  display: flex;
  justify-content: space-between;
}
</style>

选项卡样式 ​

  • styles和activeStyle选项卡和其选中后的样式
  • label和activeLabel选项卡中文本和选中后的文本
  • image和activeImage选项卡中图片链接和其选中后图片链接
  • labelStyle和activeLabelStyle选项卡中文本和其选中后的样式
  • imageStyle和activeImageStyle选项卡中图片和其选中后的样式
预览
vue
<template>
  <view>
    <uni-section
      title="选项卡样式"
      type="line"
    >
      <HTab
        ref="HTab"
        v-model="active0"
        direction="x"
      >
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
          image="/static/logo-shadow.png"
          :styles="{
            transform: 'rotateZ(0deg)',
          }"
          :active-style="{
            transition: '.5s',
            transform: 'rotateZ(360deg)',
          }"
        />
      </HTab>
    </uni-section>

    <view class="flex_box">
      <uni-section
        title="文本样式"
        type="line"
      >
        <HTab v-model="active1">
          <HTabItem
            v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
            :key="index"
            :value="index"
            :label="`选项${item}`"
            image="/static/logo-shadow.png"
            :label-style="{
              transform: 'rotateZ(0deg)',
            }"
            :active-label-style="{
              transition: '.5s',
              transform: 'rotateZ(360deg)',
            }"
          />
        </HTab>
      </uni-section>

      <uni-section
        title="图片样式"
        type="line"
      >
        <HTab v-model="active2">
          <HTabItem
            v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
            :key="index"
            :value="index"
            :label="`选项${item}`"
            image="/static/logo-shadow.png"
            :image-style="{
              transform: 'rotateZ(0deg)',
            }"
            :active-image-style="{
              transition: '.5s',
              transform: 'rotateZ(360deg)',
            }"
          />
        </HTab>
      </uni-section>

      <uni-section
        title="更改文本"
        type="line"
      >
        <HTab v-model="active3">
          <HTabItem
            v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
            :key="index"
            :value="index"
            :label="`选项${item}`"
            image="/static/logo-shadow.png"
            active-label="选中项"
          />
        </HTab>
      </uni-section>

      <uni-section
        title="更改图片"
        type="line"
      >
        <HTab v-model="active4">
          <HTabItem
            v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
            :key="index"
            :value="index"
            :label="`选项${item}`"
            image="/static/logo-colourless.png"
            active-image="/static/logo-shadow.png"
          />
        </HTab>
      </uni-section>
    </view>
  </view>
</template>
<template>
  <view>
    <uni-section
      title="选项卡样式"
      type="line"
    >
      <HTab
        ref="HTab"
        v-model="active0"
        direction="x"
      >
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
          image="/static/logo-shadow.png"
          :styles="{
            transform: 'rotateZ(0deg)',
          }"
          :active-style="{
            transition: '.5s',
            transform: 'rotateZ(360deg)',
          }"
        />
      </HTab>
    </uni-section>

    <view class="flex_box">
      <uni-section
        title="文本样式"
        type="line"
      >
        <HTab v-model="active1">
          <HTabItem
            v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
            :key="index"
            :value="index"
            :label="`选项${item}`"
            image="/static/logo-shadow.png"
            :label-style="{
              transform: 'rotateZ(0deg)',
            }"
            :active-label-style="{
              transition: '.5s',
              transform: 'rotateZ(360deg)',
            }"
          />
        </HTab>
      </uni-section>

      <uni-section
        title="图片样式"
        type="line"
      >
        <HTab v-model="active2">
          <HTabItem
            v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
            :key="index"
            :value="index"
            :label="`选项${item}`"
            image="/static/logo-shadow.png"
            :image-style="{
              transform: 'rotateZ(0deg)',
            }"
            :active-image-style="{
              transition: '.5s',
              transform: 'rotateZ(360deg)',
            }"
          />
        </HTab>
      </uni-section>

      <uni-section
        title="更改文本"
        type="line"
      >
        <HTab v-model="active3">
          <HTabItem
            v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
            :key="index"
            :value="index"
            :label="`选项${item}`"
            image="/static/logo-shadow.png"
            active-label="选中项"
          />
        </HTab>
      </uni-section>

      <uni-section
        title="更改图片"
        type="line"
      >
        <HTab v-model="active4">
          <HTabItem
            v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
            :key="index"
            :value="index"
            :label="`选项${item}`"
            image="/static/logo-colourless.png"
            active-image="/static/logo-shadow.png"
          />
        </HTab>
      </uni-section>
    </view>
  </view>
</template>
vue
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';
import { HTab } from '../../packages/components/index';

export default defineComponent({
  data() {
    return {
      active0: 0,
      active1: 0,
      active2: 1,
      active3: 2,
      active4: 3,
    };
  },
  mounted() {
    /**
     * 在小程序中：首次获取尺寸时由于第一个选项卡设置了:
     * active-style="{
     *       transition: '.5s',
     *       transform: 'rotateZ(360deg)',
     *   }"
     * 导致获取尺寸异常,需要等待旋转结束后重新计算尺寸
     */
    setTimeout(() => {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
      (this.$refs.HTab as InstanceType<typeof HTab>).resize();
    }, 500);
  },
});
</script>
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';
import { HTab } from '../../packages/components/index';

export default defineComponent({
  data() {
    return {
      active0: 0,
      active1: 0,
      active2: 1,
      active3: 2,
      active4: 3,
    };
  },
  mounted() {
    /**
     * 在小程序中：首次获取尺寸时由于第一个选项卡设置了:
     * active-style="{
     *       transition: '.5s',
     *       transform: 'rotateZ(360deg)',
     *   }"
     * 导致获取尺寸异常,需要等待旋转结束后重新计算尺寸
     */
    setTimeout(() => {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
      (this.$refs.HTab as InstanceType<typeof HTab>).resize();
    }, 500);
  },
});
</script>
vue
<style lang='scss' scoped>
.flex_box {
  display: flex;
  justify-content: space-between;
}
</style>
<style lang='scss' scoped>
.flex_box {
  display: flex;
  justify-content: space-between;
}
</style>

使用插槽 ​

  • HTab默认插槽：标签栏的内容，可以和HTabItem穿插使用

  • HTab具名插槽active：自定义滑块的内容

  • HTabItem默认插槽：不使用属性指定的图片和文本，使用自定义选项卡内容

    预览
vue
<template>
  <view class="flex_box">
    <uni-section
      title="HTab插槽"
      type="line"
    >
      <HTab v-model="active0">
        <view class="title">
          套餐
        </view>
        <HTabItem
          :value="1"
          image="/static/logo-shadow.png"
          label="单人餐"
        />
        <HTabItem
          :value="2"
          image="/static/logo-shadow.png"
          label="双人餐"
        />
        <view class="title">
          主食
        </view>
        <HTabItem
          :value="3"
          image="/static/logo-shadow.png"
          label="米饭"
        />
        <HTabItem
          :value="4"
          image="/static/logo-shadow.png"
          label="馒头"
        />
        <view class="title">
          饮品
        </view>
        <HTabItem
          :value="5"
          image="/static/logo-shadow.png"
          label="雷碧"
        />
        <HTabItem
          :value="6"
          image="/static/logo-shadow.png"
          label="勇闯天堂"
        />
      </HTab>
    </uni-section>

    <uni-section
      title="HTab-active插槽"
      type="line"
    >
      <HTab
        v-model="active1"
        width="125px"
      >
        <template #active>
          <view class="active" />
        </template>
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
          :label-style="{
            fontWeight: 'bold'
          }"
        />
      </HTab>
    </uni-section>

    <uni-section
      title="HTabItem插槽"
      type="line"
    >
      <HTab v-model="active2">
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
        >
          <view>item:{{ item }}</view>
          <view>index:{{ index }}</view>
        </HTabItem>
      </HTab>
    </uni-section>
  </view>
</template>
<template>
  <view class="flex_box">
    <uni-section
      title="HTab插槽"
      type="line"
    >
      <HTab v-model="active0">
        <view class="title">
          套餐
        </view>
        <HTabItem
          :value="1"
          image="/static/logo-shadow.png"
          label="单人餐"
        />
        <HTabItem
          :value="2"
          image="/static/logo-shadow.png"
          label="双人餐"
        />
        <view class="title">
          主食
        </view>
        <HTabItem
          :value="3"
          image="/static/logo-shadow.png"
          label="米饭"
        />
        <HTabItem
          :value="4"
          image="/static/logo-shadow.png"
          label="馒头"
        />
        <view class="title">
          饮品
        </view>
        <HTabItem
          :value="5"
          image="/static/logo-shadow.png"
          label="雷碧"
        />
        <HTabItem
          :value="6"
          image="/static/logo-shadow.png"
          label="勇闯天堂"
        />
      </HTab>
    </uni-section>

    <uni-section
      title="HTab-active插槽"
      type="line"
    >
      <HTab
        v-model="active1"
        width="125px"
      >
        <template #active>
          <view class="active" />
        </template>
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
          :label-style="{
            fontWeight: 'bold'
          }"
        />
      </HTab>
    </uni-section>

    <uni-section
      title="HTabItem插槽"
      type="line"
    >
      <HTab v-model="active2">
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
        >
          <view>item:{{ item }}</view>
          <view>index:{{ index }}</view>
        </HTabItem>
      </HTab>
    </uni-section>
  </view>
</template>
vue
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';

export default defineComponent({
  data() {
    return {
      active0: 1,
      active1: 0,
      active2: 0,
    };
  },
});
</script>
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';

export default defineComponent({
  data() {
    return {
      active0: 1,
      active1: 0,
      active2: 0,
    };
  },
});
</script>
vue
<style lang='scss' scoped>
.flex_box {
  display: flex;
  justify-content: space-between;
}

.title {
  width: 100%;
  height: 60rpx;
  text-align: center;
  color: rgb(95, 95, 205);
  font-weight: bolder;
  border-top: 4px solid rgb(95, 95, 205);
}

.active {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(135deg,
      rgb(95, 95, 205) 0,
      rgb(95, 95, 205) 4px,
      rgb(145, 145, 205) 4px,
      rgb(145, 145, 205) 8px,
      rgb(145, 145, 205) 8px,
    );
}
</style>
<style lang='scss' scoped>
.flex_box {
  display: flex;
  justify-content: space-between;
}

.title {
  width: 100%;
  height: 60rpx;
  text-align: center;
  color: rgb(95, 95, 205);
  font-weight: bolder;
  border-top: 4px solid rgb(95, 95, 205);
}

.active {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(135deg,
      rgb(95, 95, 205) 0,
      rgb(95, 95, 205) 4px,
      rgb(145, 145, 205) 4px,
      rgb(145, 145, 205) 8px,
      rgb(145, 145, 205) 8px,
    );
}
</style>

关闭动画或滚动 ​

  • scrollAnimation：是否开启滚动动画
  • activeAnimation：是否开启滑块动画
  • scrollCenter：是否开启选中项自动滚动至中间功能
  • showActive：是否开启滑块
预览
vue
<template>
  <view class="flex_box">
    <uni-section
      title="关闭滚动动画"
      type="line"
    >
      <HTab
        v-model="active"
        :scroll-animation="false"
      >
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
        />
      </HTab>
    </uni-section>

    <uni-section
      title="关闭滑块动画"
      type="line"
    >
      <HTab
        v-model="active"
        :active-animation="false"
      >
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
        />
      </HTab>
    </uni-section>

    <uni-section
      title="关闭自动滚动"
      type="line"
    >
      <HTab
        v-model="active"
        :scroll-center="false"
      >
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
        />
      </HTab>
    </uni-section>

    <uni-section
      title="关闭滑块"
      type="line"
    >
      <HTab
        v-model="active"
        :show-active="false"
      >
        <!-- 关闭滑块后无法区分当前选中项，可通过 `activeStyle` 设置选中项样式 -->
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
          :active-style="{
            backgroundColor: 'rgb(145, 145, 205)'
          }"
        />
      </HTab>
    </uni-section>
  </view>
</template>
<template>
  <view class="flex_box">
    <uni-section
      title="关闭滚动动画"
      type="line"
    >
      <HTab
        v-model="active"
        :scroll-animation="false"
      >
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
        />
      </HTab>
    </uni-section>

    <uni-section
      title="关闭滑块动画"
      type="line"
    >
      <HTab
        v-model="active"
        :active-animation="false"
      >
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
        />
      </HTab>
    </uni-section>

    <uni-section
      title="关闭自动滚动"
      type="line"
    >
      <HTab
        v-model="active"
        :scroll-center="false"
      >
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
        />
      </HTab>
    </uni-section>

    <uni-section
      title="关闭滑块"
      type="line"
    >
      <HTab
        v-model="active"
        :show-active="false"
      >
        <!-- 关闭滑块后无法区分当前选中项，可通过 `activeStyle` 设置选中项样式 -->
        <HTabItem
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
          :key="index"
          :value="index"
          :label="`选项${item}`"
          :active-style="{
            backgroundColor: 'rgb(145, 145, 205)'
          }"
        />
      </HTab>
    </uni-section>
  </view>
</template>
vue
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';

export default defineComponent({
  data() {
    return {
      active: 0,
    };
  },
});
</script>
<script lang="ts">
import { defineComponent } from '@vue/runtime-dom';

export default defineComponent({
  data() {
    return {
      active: 0,
    };
  },
});
</script>
vue
<style lang='scss' scoped>
.flex_box {
  display: flex;
  justify-content: space-between;
}
</style>
<style lang='scss' scoped>
.flex_box {
  display: flex;
  justify-content: space-between;
}
</style>

Props ​

属性名描述类型可选值默认值
value/v-model当前选中HTabItem所绑定的值string number boolean--
direction标签栏的方向stringx,yy
width标签栏的宽度string number-160rpx/100vw
height标签栏的高度string number-1200rpx/160rpx
activeAspect滑块的朝向stringnone,left, right, top, bottomnone
activeDuration滑块过渡时间(单位:ms)number-500
activeBackgroundColor滑块的背景颜色string-#FFFFFF
activeStyle滑块的样式string object--
scrollAnimation是否开启滚动动画boolean-true
activeAnimation是否开启滑块动画boolean-true
scrollCenter是否开启选中项自动滚动至中间功能boolean-true
showActive是否开启滑块boolean-true

Events ​

事件名描述参数
input选中HTabItem改变事件选中HTabItem所绑定的value

Slot ​

插槽名描述插槽属性
default标签栏的内容，可以和HTabItem穿插使用-
active自定义滑块内容-

Item Props ​

属性名描述类型可选值默认值
value绑定值string number boolean--
direction图片和文本的排列方向stringx , yy
label文本内容string--
activeLabel选中后的文本内容string-label
labelStyle文本内容的样式string object--
activeLabelStyle选中后文本内容的样式string object-labelStyle
image图片链接string--
activeImage选中后的图片链接string-image
imageStyle图片的样式string object--
activeImageStyle选中后的图片的样式string object-imageStyle
styles选项卡的样式string object--
activeStyle选中后选项卡的样式string object-styles

Item Events ​

事件名描述参数
select当前选项卡被选中触发的事件-

Item Slot ​

插槽名描述插槽属性
default自定义选项卡内容-