更新记录

1.0.0（2025-12-19） 下载此版本

一个基于 UniApp 的多页签滑动吸顶组件，支持 Tab 吸顶 + Swiper 左右滑动切换，适用于微信小程序、H5、App 等多端。

✨ 特性

平台兼容性

SwiperStickyTabs 多页签滑动吸顶组件

一个基于 UniApp 的多页签滑动吸顶组件，支持 Tab 吸顶 + Swiper 左右滑动切换，适用于微信小程序、H5、App 等多端。

✨ 特性

• 🎯 吸顶效果 - Tab 栏滑动到顶部时自动固定
• 🔄 双向联动 - 点击 Tab 或左右滑动内容区域联动切换
• 📱 多端兼容 - 支持微信小程序、H5、App
• 🎨 高度可定制 - 支持自定义颜色、样式
• 📦 开箱即用 - 通过插槽自定义内容，使用简单

📦 安装

组件已内置在项目中，无需额外安装。

目录结构

├── components/
│   └── SwiperStickyTabs/
│       └── SwiperStickyTabs.vue
├── pages/
│   └── index/
│       └── index.vue
└── pages.json

配置 easycom（已配置）

在 pages.json 中添加 easycom 配置后，组件可自动引入：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^SwiperStickyTabs$": "@/components/SwiperStickyTabs/SwiperStickyTabs.vue"
    }
  }
}

🚀 使用方法

基础用法

<template>
  <view class="page">
    <!-- 头部内容（可选） -->
    <view class="header">
      <text>页面头部</text>
    </view>

    <!-- 吸顶组件 -->
    <SwiperStickyTabs
      ref="stickyTabs"
      :tabs="tabs"
      :list="tabContents"
      :current="currentTab"
      @change="onTabChange"
    >
      <template v-slot="{ tab, index, list }">
        <view class="content-list">
          <view v-for="item in list" :key="item.id" class="item">
            <text>{{ item.title }}</text>
          </view>
        </view>
      </template>
    </SwiperStickyTabs>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: "推荐", icon: "🔥" },
        { name: "热门", icon: "⭐" },
        { name: "最新", icon: "🆕" },
      ],
      currentTab: 0,
      tabContents: [],
    };
  },

  onLoad() {
    // 初始化数据（二维数组）
    this.tabContents = this.tabs.map((tab, index) => {
      return Array.from({ length: 20 }, (_, i) => ({
        id: `${index}-${i}`,
        title: `${tab.name} 内容 ${i + 1}`,
      }));
    });
  },

  // ⚠️ 必须：监听页面滚动，更新吸顶状态
  onPageScroll(e) {
    this.$refs.stickyTabs?.updateFixedStatus(e.scrollTop);
  },

  methods: {
    onTabChange({ index, tab }) {
      this.currentTab = index;
      console.log("切换到:", tab.name);
    },
  },
};
</script>

📝 API

Props 属性

Events 事件

Slots 插槽

插槽参数说明：

Methods 方法

通过 ref 调用组件方法：

📐 数据结构

tabs 数据格式

const tabs = [
  { name: "推荐", icon: "🔥", key: "recommend" },
  { name: "热门", icon: "⭐", key: "hot" },
  { name: "最新", icon: "🆕", key: "latest" },
];

list 数据格式（二维数组）

const list = [
  // Tab 0 的内容
  [
    { id: "0-1", title: "推荐内容1" },
    { id: "0-2", title: "推荐内容2" },
  ],
  // Tab 1 的内容
  [
    { id: "1-1", title: "热门内容1" },
    { id: "1-2", title: "热门内容2" },
  ],
  // Tab 2 的内容
  [
    { id: "2-1", title: "最新内容1" },
    { id: "2-2", title: "最新内容2" },
  ],
];

🎨 自定义样式示例

自定义颜色主题

<SwiperStickyTabs
  :tabs="tabs"
  :list="list"
  active-color="#ff6b35"
  inactive-color="#999999"
  indicator-color="#ff6b35"
  bg-color="#f8f8f8"
/>

渐变指示器

<SwiperStickyTabs
  :tabs="tabs"
  :list="list"
  indicator-color="linear-gradient(90deg, #ff6b35, #f7931e)"
/>

⚠️ 注意事项

1. 必须在 onPageScroll 中调用 updateFixedStatus

   onPageScroll(e) {
    this.$refs.stickyTabs?.updateFixedStatus(e.scrollTop);
   }

2. 页面需使用自定义导航栏

   在 pages.json 中配置：

   {
    "path": "pages/index/index",
    "style": {
      "navigationStyle": "custom"
    }
   }

3. list 必须是二维数组

   每个 Tab 对应一个子数组，索引与 tabs 一一对应。

4. 微信小程序兼容性

   • 不支持 :style 调用方法
   • 不支持动态插槽名
   • 组件已做兼容处理

🔧 运行项目

# 安装依赖
npm install

# 运行到微信小程序
npm run dev:mp-weixin

# 运行到 H5
npm run dev:h5

📄 License

MIT