更新记录

1.0.0（2025-05-18） 下载此版本

这是一个支持点击和滑动的标签组件，适用于uni-app项目。

平台兼容性

CustomTab 滑动标签组件

这是一个支持点击和滑动的标签组件，适用于uni-app项目。

特性

• 点击标签项时，背景指示器会平滑滑动到该项
• 支持无限数量的标签项
• 标签过多时自动支持横向滚动
• 点击标签时自动滚动到视图中心
• 高度可定制的样式
• 支持手动控制标签切换
• 兼容各平台（H5、App、各种小程序）
• 支持设置标签等宽
• 支持自定义组件宽度
• 内部样式使用rpx单位，自动适配不同尺寸屏幕
• 滚动条隐藏，视觉更加整洁

使用方法

基本用法

<template>
  <custom-tab :items="tabItems" @change="onTabChange" />
</template>

<script>
import CustomTab from '@/components/CustomTab/CustomTab.vue';

export default {
  components: {
    CustomTab
  },
  data() {
    return {
      tabItems: ['标签1', '标签2', '标签3']
    }
  },
  methods: {
    onTabChange(event) {
      console.log('当前选中:', event.index, event.name);
    }
  }
}
</script>

自定义样式和宽度

<template>
  <custom-tab 
    :items="tabItems" 
    :tab-style="customTabStyle"
    :tab-bg-style="customTabBgStyle"
    :active-tab-item-style="customActiveTabStyle"
    :tab-item-style="customTabItemStyle"
    item-width="160rpx"
    scroll-view-width="300px"
  />
</template>

<script>
export default {
  data() {
    return {
      tabItems: ['标签1', '标签2', '标签3'],

      // 整个标签栏样式
      customTabStyle: {
        backgroundColor: '#f0f0f0',
        borderRadius: '24rpx'
      },

      // 背景指示器样式
      customTabBgStyle: {
        backgroundColor: '#ffffff',
        boxShadow: '0 4rpx 16rpx rgba(0, 0, 0, 0.15)'
      },

      // 选中标签样式
      customActiveTabStyle: {
        color: '#ff6600',
        fontWeight: 'bold'
      },

      // 普通标签样式
      customTabItemStyle: {
        color: '#666666'
      }
    }
  }
}
</script>

与其他元素并排使用

<template>
  <view class="cell">
    <view class="cell-title">标题</view>
    <custom-tab 
      :items="tabItems"
      scroll-view-width="auto"
      ref="customTab"
      @scroll="onTabScroll"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabItems: ['标签1', '标签2', '标签3']
    }
  },
  methods: {
    onTabScroll(e) {
      console.log('滚动信息:', e);
    }
  }
}
</script>

<style>
.cell {
  display: flex;
  align-items: center;
}
.cell-title {
  flex-shrink: 0;
  margin-right: 20rpx;
}
</style>

方法调用

<template>
  <custom-tab 
    :items="tabItems"
    ref="customTab"
  />
  <button @click="nextTab">下一个</button>
</template>

<script>
export default {
  methods: {
    nextTab() {
      this.$refs.customTab.setActiveTab(2); // 切换到第三个标签
    },

    refreshTabs() {
      this.$refs.customTab.refresh(); // 刷新标签布局
    }
  }
}
</script>

属性

事件

方法

单位说明

组件内部样式使用rpx单位，这是uni-app推荐的响应式单位，可以根据屏幕宽度自动缩放，使组件在不同设备上有一致的视觉效果。在自定义样式时，也推荐使用rpx单位：

• 1rpx = 屏幕宽度/750像素
• 在750px宽的设计稿上，1rpx = 1px
• 在375px宽的屏幕上，750rpx = 375px，1rpx = 0.5px

详细说明可参考uni-app官方文档

实现细节

1. 跨平台滚动实现：

   • 组件使用uni-app的scroll-into-view属性实现滚动，确保在所有平台上可靠工作
   • 无需依赖DOM的scrollIntoView方法，避免不同平台的兼容性问题
   • 滚动动画通过scroll-with-animation属性保证平滑

2. 滚动条隐藏：组件使用了多种CSS技术确保在各平台上都不显示滚动条，同时保留滚动功能：

   • :show-scrollbar="false" 属性用于uni-app原生控制
   • 使用CSS选择器 ::-webkit-scrollbar 解决WebKit浏览器问题
   • 使用 scrollbar-width: none 解决Firefox浏览器问题
   • 使用 -ms-overflow-style: none 解决IE和Edge浏览器问题

3. 自适应宽度：设置scroll-view-width="auto"可以让组件宽度自适应，方便与其他元素并排放置

4. 滚动事件监听：提供scroll事件回调，方便上层组件获取滚动状态和实现高级功能