更新记录

1.0.0（2026-11-12） 下载此版本

新增

• 从 e-sport 项目移植 y-nav-bar 组件到 uni_modules。
• 支持居中标题、左侧头像两种布局。
• 自动适配微信小程序胶囊按钮位置，支持状态栏占位。
• 支持页面滚动时的背景渐变与模糊效果。
• 返回逻辑兼容页面栈为空，自动回到首页。
• 声明 y-scss、y-icon 依赖。

平台兼容性

uni-app(5.0)

y-nav-bar

y-nav-bar 是面向 uni-app（Vue 3） 的自定义导航栏组件，适配微信小程序胶囊按钮，支持标题、返回、左侧头像和滚动渐变。

• 当前版本：1.0.0
• 依赖：y-scss（主题变量与工具类）、y-icon（返回箭头）

特性

• 自动读取胶囊按钮位置，适配不同机型状态栏高度。
• 支持居中标题、左侧头像两种布局。
• 页面滚动时背景渐变 + 模糊。
• 返回逻辑兼容页面栈为空的情况，自动回到首页。

属性

事件

用法

<template>
  <view>
    <y-nav-bar title="页面标题" @nav-info="onNavInfo" />

    <!-- 左侧头像模式 -->
    <y-nav-bar type="left" :img="avatar" title="棋手详情" :show-back="false" />
  </view>
</template>

使用自定义导航栏的页面，需要在 pages.json 中关闭原生导航栏：

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

滚动渐变

组件监听全局 pageScroll 事件。页面需要在 onPageScroll 中派发滚动位置：

<script setup>
import { onPageScroll } from '@dcloudio/uni-app'

onPageScroll((e) => {
  uni.$emit('pageScroll', { scrollTop: e.scrollTop })
})
</script>

pageScroll 是全局事件，多个页面同时挂载导航栏时会互相影响，建议同一时间只在一个页面使用。

说明

• 返回时如果页面栈没有上一页，会 reLaunch 到 /pages/index/index，如项目首页路径不同请调整。
• 组件依赖 y-scss 的 --y-container、--y-title 变量，以及 d-flex、ai-center、fs-30、toel 等工具类。
• 返回箭头使用 y-icon 的 left 图标。

更新日志

见 changelog.md。