更新记录

1.0.4（2025-03-14）

插件无法试用问题

1.0.3（2025-03-14）

平台兼容性

1.0.2（2025-03-13）

代码优化，使用优化

平台兼容性

Scroll-Nav-Bar 滚动导航栏

代码块： scroll-nav-bar

一个美观、功能丰富的自定义标签页组件，支持图片展示、滚动导航、吸顶等特性。

平台兼容性

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中引用组件

<template>
  <view class="container">
    <!-- 基础用法 -->
    <scroll-nav-bar 
      v-model="activeIndex" 
      :items="tabItems"
      :scrollable="true"
      :title-active-color="themeColor"
      @change="onTabChange">
    </scroll-nav-bar>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 根据activeIndex显示对应内容 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      themeColor: '#0a3f81',
      tabItems: [
        { name: '标签一', imageUrl: 'https://example.com/image1.png' },
        { name: '标签二', imageUrl: 'https://example.com/image2.png' },
        { name: '标签三', imageUrl: 'https://example.com/image3.png' },
        { name: '标签四', imageUrl: 'https://example.com/image4.png' },
        { name: '标签五', imageUrl: 'https://example.com/image5.png' }
      ]
    }
  },
  methods: {
    onTabChange(index) {
      console.log('当前选中的标签索引:', index);
      // 处理标签切换逻辑
    }
  }
}
</script>

不带图片的简单标签

<scroll-nav-bar 
  v-model="activeIndex" 
  :items="tabItems"
  :scrollable="true"
  :title-active-color="themeColor"
  @change="onTabChange">
</scroll-nav-bar>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      themeColor: '#0a3f81',
      tabItems: [
        { name: '标签一' },
        { name: '标签二' },
        { name: '标签三' },
        { name: '标签四' },
        { name: '标签五' }
      ]
    }
  }
}
</script>

带吸顶效果

<scroll-nav-bar 
  v-model="activeIndex" 
  :items="tabItems"
  :scrollable="true"
  :sticky="true"
  :offset-top="44"
  :title-active-color="themeColor"
  @change="onTabChange">
</scroll-nav-bar>

API

Props

Events

Slots

注意事项

1. 组件内部使用了CSS变量，在较老的浏览器中可能不被支持
2. 在小程序环境中，吸顶功能依赖于页面的 onPageScroll 事件
3. 标签项的 imageUrl 属性用于显示标签上方的图片，如不需要可不提供
4. 标签项的 disabled 属性设置为 true 时，该标签将无法点击

示例项目

可以参考以下示例了解组件的完整用法：

<template>
  <view class="container">
    <scroll-nav-bar 
      v-model="activeIndex" 
      :items="categories"
      :scrollable="true"
      :sticky="true"
      :offset-top="statusBarHeight"
      :title-active-color="themeColor"
      @change="onCategoryChange">
    </scroll-nav-bar>

    <view class="content-area">
      <!-- 根据activeIndex显示对应内容 -->
      <view v-for="(item, index) in categories" :key="index" v-show="index === activeIndex">
        <view class="category-content">
          {{ item.name }} 的内容区域
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      activeIndex: 0,
      themeColor: '#0a3f81',
      categories: [
        { name: '分类一', imageUrl: '/static/category1.png' },
        { name: '分类二', imageUrl: '/static/category2.png' },
        { name: '分类三', imageUrl: '/static/category3.png' },
        { name: '分类四', imageUrl: '/static/category4.png' },
        { name: '分类五', imageUrl: '/static/category5.png' },
        { name: '分类六', imageUrl: '/static/category6.png' },
        { name: '分类七', imageUrl: '/static/category7.png' },
        { name: '分类八', imageUrl: '/static/category8.png' }
      ]
    }
  },
  onLoad() {
    // 获取状态栏高度（用于吸顶模式）
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  },
  methods: {
    onCategoryChange(index) {
      console.log('当前选中的分类索引:', index);
      // 处理分类切换逻辑
    }
  }
}
</script>

<style lang="scss">
.container {
  width: 100%;
  min-height: 100vh;
}

.content-area {
  padding: 20rpx;
}

.category-content {
  height: 300rpx;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
}
</style>