更新记录

1.2（2026-01-09） 下载此版本

添加参数showTabs

1.1（2026-01-06） 下载此版本

标签页修改

1.0.0（2026-01-06） 下载此版本

build v1.0.0

平台兼容性

uni-app(4.0)

其他

wlh-tabs-list 标签页组件

组件介绍

wlh-tabs-list 是一个基于 uni-app 开发的可复用标签页组件，支持标签切换、内容联动，可自定义标签栏显示状态和内容区域高度。

参数说明

事件说明

使用示例

基础使用（简单标签）

<template>
  <view class="container">
    <!-- 引入标签页组件 -->
    <wlh-tabs-list :tabs="tabs" swiperHeight="300px" @change="handleTabChange">
      <!-- 第一个标签内容 -->
      <template #tab-0>
        <view class="tab-content">
          <text>这是第一个标签的内容</text>
        </view>
      </template>
      <!-- 第二个标签内容 -->
      <template #tab-1>
        <view class="tab-content">
          <text>这是第二个标签的内容</text>
        </view>
      </template>
      <!-- 第三个标签内容 -->
      <template #tab-2>
        <view class="tab-content">
          <text>这是第三个标签的内容</text>
        </view>
      </template>
    </wlh-tabs-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 简单格式的标签数据
      tabs: ['标签1', '标签2', '标签3']
    };
  },
  methods: {
    // 监听标签切换事件
    handleTabChange(index) {
      console.log('当前选中的标签索引：', index);
    }
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.tab-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>