uni-app 滚动时导航栏变色:onPageScroll 实战(附完整代码和踩坑记录)

resolveNavBarColor(scrollTop) → { background, dark }

{  "path": "pages/detail/index",  "style": {    "navigationBarTitleText": "详情",    "navigationStyle": "custom"  }}

/* 页面顶部渐变：纯蓝段 + 一段渐隐 */.page {  /* 纯蓝段结束位置（rpx）—— 必须 ≥ 导航栏总高，原因见第五节第 1 条 */  $fade-start: 180;  /* 渐隐终点（rpx） */  $fade-end: 590;  min-height: 100vh;  background-color: #f5fbff;  background-image: linear-gradient(    to bottom,    #1969f0 0rpx,    #1969f0 #{$fade-start}rpx,    #f5fbff #{$fade-end}rpx  );  background-repeat: no-repeat;}

/** * 页面顶部渐变 & 由它派生出的导航栏配色 *//** 纯蓝段结束位置（rpx）—— 必须 ≥ 导航栏总高，否则静止时导航栏底边就会跳色 */export const FADE_START_RPX = 180;/** 渐隐终点（rpx） */export const FADE_END_RPX = 590;/** 渐变起点色 */const COLOR_FROM = '#1969f0';/** 页面顶部渐变，挂在根容器上随内容滚动 */export const PAGE_TOP_GRADIENT =  `linear-gradient(to bottom, ${COLOR_FROM} 0rpx, ${COLOR_FROM} ${FADE_START_RPX}rpx, #f5fbff ${FADE_END_RPX}rpx)`;/** 静止在顶部（未滚动）时的导航栏底色：**与纯蓝段同色** */export const NAV_BAR_TOP_COLOR = COLOR_FROM;/** 页面一旦滚动后的导航栏底色 */export const NAV_BAR_SOLID_COLOR = '#ffffff';/** 导航栏配色 */export interface NavBarColor {  /** 导航栏底色 */  background: string;  /** 标题是否使用深色 */  dark: boolean;}/** * 计算指定滚动位置下的导航栏配色 * * @param scrollTop 页面滚动距离（px），来自 onPageScroll * @returns 导航栏底色 + 是否深色文字 */export function resolveNavBarColor(scrollTop: number): NavBarColor {  const solid = scrollTop > 0;  return {    background: solid ? NAV_BAR_SOLID_COLOR : NAV_BAR_TOP_COLOR,    dark: solid,  };}

<template>  <viewclass="page":style="{ backgroundImage: PAGE_TOP_GRADIENT }">    <!-- 自定义导航栏（与内容平级，不要塞进正文里） -->    <view      class="nav-bar"      :style="{ paddingTop: statusBarHeight + 'px', backgroundColor: navBackground }"    >      <view        class="nav-content"        :style="{ height: navBarHeight + 'px', paddingLeft: navRightReserve + 'px', paddingRight: navRightReserve + 'px' }"      >        <viewclass="nav-back" @click="onBack">          <uni-iconstype="back"size="22":color="navDark ? '#2c2c2a' : '#ffffff'"></uni-icons>        </view>        <viewclass="nav-title":class="{ 'is-solid': navDark }">详情</view>      </view>    </view>    <!-- 等高占位：正文从导航栏下面开始，而不是被它压住 -->    <view      class="nav-placeholder"      :style="{ height: statusBarHeight + navBarHeight + 'px' }"    ></view>    <!-- 正文（示例只放一块空卡片，用来接住白条） -->    <viewclass="content">      <viewclass="card"></view>    </view>  </view></template>

<uni-icons type="back" size="22" :color="navDark ? '#2c2c2a' : '#ffffff'"></uni-icons>

import { ref } from 'vue';import { onLoad, onPageScroll } from '@dcloudio/uni-app';import {  PAGE_TOP_GRADIENT,  NAV_BAR_TOP_COLOR,  resolveNavBarColor,} from '@/utils/pageGradient';/* 自定义导航栏尺寸 */const statusBarHeight = ref<number>(20);const navBarHeight = ref<number>(44);/* 右侧为胶囊按钮预留的宽度（左右各留一份，标题才是真正居中的；左侧返回键是绝对定位，不占这一格） */const navRightReserve = ref<number>(0);const navBackground = ref<string>(NAV_BAR_TOP_COLOR);const navDark = ref<boolean>(false);/* 页面原生滚动 → 派生导航栏配色 */onPageScroll((e) => {  const color = resolveNavBarColor(e.scrollTop);  if (color.background !== navBackground.value) navBackground.value = color.background;  if (color.dark !== navDark.value) navDark.value = color.dark;});/* 返回：有上一页就退回去；从分享/扫码直接进来的详情页没有上一页，退回列表 */const onBack = () => {  const pages = getCurrentPages();  if (pages.length > 1) {    uni.navigateBack();  } else {    uni.reLaunch({ url: '/pages/index/index' }); // 换成你项目的列表页  }};

onLoad(() => {  const sys = uni.getSystemInfoSync();  /* 状态栏高度：不要写死，刘海屏与安卓差异很大 */  statusBarHeight.value = sys.statusBarHeight ?? 20;  // #ifdef MP-WEIXIN  const menuBtn = uni.getMenuButtonBoundingClientRect();  // 胶囊上下留白对称 → 导航栏高 = (胶囊顶 - 状态栏高) * 2 + 胶囊高  navBarHeight.value = (menuBtn.top - statusBarHeight.value) * 2 + menuBtn.height;  // #endif  // #ifndef MP-WEIXIN  navBarHeight.value = 44;  // #endif});

/** * 页面顶部渐变 & 派生出的导航栏配色 *//** 纯蓝段结束位置（rpx）—— 必须 ≥ 导航栏总高，否则静止时导航栏底边就会跳色 */export const FADE_START_RPX = 180;/** 渐隐终点（rpx） */export const FADE_END_RPX = 590;/** 渐变起点色 #1969f0 */const COLOR_FROM = '#1969f0';/** 页面顶部渐变，挂在根容器上随内容滚动 */export const PAGE_TOP_GRADIENT =  `linear-gradient(to bottom, ${COLOR_FROM} 0rpx, ${COLOR_FROM} ${FADE_START_RPX}rpx, #f5fbff ${FADE_END_RPX}rpx)`;/** 静止在顶部（未滚动）时的导航栏底色：与头图纯蓝段同色 */export const NAV_BAR_TOP_COLOR = COLOR_FROM;/** 页面一旦滚动后的导航栏底色 */export const NAV_BAR_SOLID_COLOR = '#ffffff';/** 导航栏配色 */export interface NavBarColor {  /** 导航栏底色 */  background: string;  /** 标题是否使用深色 */  dark: boolean;}/** * 计算指定滚动位置下的导航栏配色 * * @param scrollTop 页面滚动距离（px），来自 onPageScroll * @returns 导航栏底色 + 是否深色文字 */export function resolveNavBarColor(scrollTop: number): NavBarColor {  const solid = scrollTop > 0;  return {    background: solid ? NAV_BAR_SOLID_COLOR : NAV_BAR_TOP_COLOR,    dark: solid,  };}

<template>  <viewclass="page":style="{ backgroundImage: PAGE_TOP_GRADIENT }">    <!-- 自定义导航栏（与内容平级，不要塞进正文里） -->    <view      class="nav-bar"      :style="{ paddingTop: statusBarHeight + 'px', backgroundColor: navBackground }"    >      <view        class="nav-content"        :style="{ height: navBarHeight + 'px', paddingLeft: navRightReserve + 'px', paddingRight: navRightReserve + 'px' }"      >        <viewclass="nav-back" @click="onBack">          <uni-iconstype="back"size="22":color="navDark ? '#2c2c2a' : '#ffffff'"></uni-icons>        </view>        <viewclass="nav-title":class="{ 'is-solid': navDark }">详情</view>      </view>    </view>    <!-- 等高占位：正文从导航栏下面开始，而不是被它压住 -->    <view      class="nav-placeholder"      :style="{ height: statusBarHeight + navBarHeight + 'px' }"    ></view>    <!-- 正文（示例只放一块空卡片） -->    <viewclass="content">      <viewclass="card"></view>    </view>  </view></template><scriptsetuplang="ts">import { ref } from 'vue';import { onLoad, onPageScroll } from '@dcloudio/uni-app';import { PAGE_TOP_GRADIENT, NAV_BAR_TOP_COLOR, resolveNavBarColor } from '@/utils/pageGradient';/* 自定义导航栏尺寸 */const statusBarHeight = ref<number>(20);const navBarHeight = ref<number>(44);/* 右侧为胶囊按钮预留的宽度（左右各留一份，标题才真正居中） */const navRightReserve = ref<number>(0);const navBackground = ref<string>(NAV_BAR_TOP_COLOR);const navDark = ref<boolean>(false);/* 页面原生滚动 → 派生导航栏配色 */onPageScroll((e) => {  const color = resolveNavBarColor(e.scrollTop);  if (color.background !== navBackground.value) navBackground.value = color.background;  if (color.dark !== navDark.value) navDark.value = color.dark;});/* 返回：有上一页就退回去；从分享/扫码直接进来的详情页没有上一页，退回列表 */const onBack = () => {  const pages = getCurrentPages();  if (pages.length > 1) {    uni.navigateBack();  } else {    uni.reLaunch({ url: '/pages/index/index' }); // 换成你项目的列表页  }};onLoad(() => {  const sys = uni.getSystemInfoSync();  /* 状态栏高度：不要写死，刘海屏与安卓差异很大 */  statusBarHeight.value = sys.statusBarHeight ?? 20;  // #ifdef MP-WEIXIN  /* 胶囊上下留白对称：导航栏高 = (胶囊顶 - 状态栏高) * 2 + 胶囊高 */  const menuBtn = uni.getMenuButtonBoundingClientRect();  navBarHeight.value = (menuBtn.top - statusBarHeight.value) * 2 + menuBtn.height;  navRightReserve.value = sys.windowWidth - menuBtn.left;  // #endif  // #ifndef MP-WEIXIN  navBarHeight.value = 44;  navRightReserve.value = 0;  // #endif});</script><stylelang="scss"scoped>.page {  min-height: 100vh;  background-color: #f5fbff;  background-repeat: no-repeat;}/* 自定义导航栏：静止时与头图纯蓝段同色，一滚动就切白（底色由行内 style 给，这里只是兜底） */.nav-bar {  position: fixed;  top: 0;  left: 0;  width: 100%;  z-index: 999;  background-color: #1969f0;  transition: background-color 0.2s;}.nav-placeholder {  width: 100%;}.nav-content {  position: relative;  display: flex;  align-items: center;  box-sizing: border-box;}/* 返回键：绝对定位，不参与 flex，所以标题仍按整条居中 */.nav-back {  position: absolute;  left: 16rpx;  top: 0;  bottom: 0;  display: flex;  align-items: center;  justify-content: center;  width: 64rpx;}.nav-title {  flex: 1;  text-align: center;  font-size: 34rpx;  font-weight: 600;  color: #ffffff;  transition: color 0.2s;  &.is-solid {    color: #2c2c2a;  }}/* 正文：示例只放一块空卡片，用来接住白条 */.content {  padding: 30rpx;}.card {  height: 1200rpx;  border-radius: 12rpx;  background: linear-gradient(-160deg, #e6f0ff 0%, #ffffff 35%, #ffffff 100%);  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);}</style>

<view  class="nav-placeholder"  :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>

const menuBtn = uni.getMenuButtonBoundingClientRect();navBarHeight = (menuBtn.top - statusBarHeight) * 2 + menuBtn.height;

.nav-bar   { transition: background-color 0.2s; }.nav-title { transition: color 0.2s; }

const nav = document.querySelector('.nav-bar');console.log(nav.getBoundingClientRect().top, window.scrollY);

const pages = getCurrentPages();if(pages.length > 1) {  uni.navigateBack();} else {  uni.reLaunch({ url: '/pages/index/index' }); // 从分享/扫码直接进来的情况}