更新记录

1.0.2（2025-03-22） 下载此版本

优化

1.0.1（2025-03-22） 下载此版本

HbuilderX版本支持更新

1.0.0（2025-03-22） 下载此版本

• 首次发布
• 实现可滚动导航栏基本功能
• 支持自定义颜色、滑块动画
• 支持右侧箭头指示器
• 支持禁用特定导航项
• 支持图片导航项
• 自动隐藏滚动条

平台兼容性

js-scroll-nav 可滚动导航栏

介绍

一个功能强大的可滚动导航栏组件，支持自定义颜色、滑块动画、右侧指示器等功能。适用于各种需要横向滚动导航的场景，如商品分类、标签页等。

特性

• 支持横向滚动，自动居中当前选中项
• 底部滑块动画，平滑过渡
• 支持自定义激活和未激活状态的颜色
• 支持右侧箭头指示器，指示更多内容
• 支持禁用特定导航项
• 支持图片导航项
• 自动隐藏滚动条，提供更好的视觉体验
• 兼容多端（H5、App、各类小程序）

安装方式

方式一：使用 HBuilderX 导入插件

1. 在 HBuilderX 顶部菜单点击 插件
2. 点击 uni-app插件市场
3. 搜索 js-scroll-nav
4. 点击 安装到项目

方式二：CLI方式安装

npm i js-scroll-nav

基本用法

<template>
  <view>
    <js-scroll-nav
      v-model="current"
      :list="tabList"
      @change="tabChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabList: [
        { name: '选项一' },
        { name: '选项二' },
        { name: '选项三' },
        { name: '选项四' },
        { name: '选项五' },
        { name: '选项六' },
        { name: '选项七' },
        { name: '选项八' }
      ]
    }
  },
  methods: {
    tabChange(index) {
      console.log('当前选中:', index);
    }
  }
}
</script>

带图片的导航

<template>
  <view>
    <js-scroll-nav
      v-model="current"
      :list="imageTabList"
      @change="tabChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      imageTabList: [
        { 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' }
      ]
    }
  },
  methods: {
    tabChange(index) {
      console.log('当前选中:', index);
    }
  }
}
</script>

自定义颜色

<template>
  <view>
    <js-scroll-nav
      v-model="current"
      :list="tabList"
      activeColor="#ff5500"
      inactiveColor="#999999"
      @change="tabChange"
    />
  </view>
</template>

显示右侧指示器

<template>
  <view>
    <js-scroll-nav
      v-model="current"
      :list="tabList"
      :showRightArrow="true"
      @change="tabChange"
    />
  </view>
</template>

API

Props

Events

Slots

注意事项

1. list数组中的对象可以包含disabled属性，设置为true时该项将被禁用
2. 如需使用图片导航，在list数组对象中添加imageUrl属性
3. 组件内部会自动处理滚动条隐藏，无需额外设置
4. 在某些复杂场景下，可能需要手动调用组件的updateLayout方法来更新布局