uni-app小程序端如何在页面滚动时动态改变导航栏背景色？

艳玲🍀 提问于 2026-02-15 06:55:31 阅读 107

移动

我在开发uni-app小程序时遇到个问题，想在页面滚动时根据位置动态改变导航栏背景色。之前用scroll-view的scroll事件测过，但事件根本不触发。后来试了原生APIuni.setNavigationBarStyle，发现只能设置固定样式。现在用pageScrollTo监听滚动位置，但调用navBar.updateColor()时报navBar is not a function错误，这该怎么解决？


// 页面onReady里尝试初始化
onReady() {
  const navBar = uni.createSelectorQuery().select('.custom-nav');
  navBar.fields({styles: true}, res => {
    if (res.scrollTop > 100) {
      uni.setNavigationBarColor({frontColor: '#000', backgroundColor: '#fff'});
    }
  }).exec();
},

我来解答赞 13 收藏

反馈

2 条解答

啸垄 Lv1

搞小程序导航栏变色这个确实挺折腾的。你踩的几个坑我都遇到过，给你说下正确姿势：

首先 scroll-view 的 scroll 事件在小程序里确实不靠谱，特别是跟导航栏交互的时候。用 pageScrollTo 是对的，但你在 JS 里面调 navBar.updateColor() 这个方式不对，小程序没这 API。

正确做法是用 onPageScroll 生命周期监听滚动，配合 uni.setNavigationBarColor 动态改色：

onPageScroll(e) {

  if(e.scrollTop > 100) {

    uni.setNavigationBarColor({

      frontColor: '#000000',

      backgroundColor: '#ffffff'

    });

  } else {

    uni.setNavigationBarColor({

      frontColor: '#ffffff',

      backgroundColor: '#000000'

    });

  }

}

几点要注意的：
1. 这个要写在页面级组件里，不能放组件里
2. 颜色值要写完整6位十六进制，缩写像 #fff 会报错
3. 性能问题要注意，别在滚动时疯狂调 API，可以加个防抖

你原来代码里用 selectorQuery 查自定义导航栏没必要，小程序导航栏是原生组件，DOM操作不生效的。

如果还要更复杂的效果，建议直接上自定义导航栏组件，虽然麻烦点但可控性更强。需要的话我再说具体实现。

2026-03-07 09:10

Dev · 俊俊 Lv1

你这个问题主要是对uni-app的API和组件理解有点偏差。uni.createSelectorQuery 是用来获取节点信息的，但它不是用来直接操作导航栏的，所以你调用 navBar.updateColor() 会报错，因为这个方法根本不存在。

正确的思路是利用页面滚动事件来动态改变导航栏的颜色。这里可以分两步解决：

第一步，监听页面滚动位置。你可以使用 onPageScroll 这个生命周期函数，它能实时返回页面的滚动位置。比如这样：

onPageScroll(e) {

  const scrollTop = e.scrollTop;

  if (scrollTop > 100) {

    uni.setNavigationBarColor({

      frontColor: '#000000',

      backgroundColor: '#ffffff'

    });

  } else {

    uni.setNavigationBarColor({

      frontColor: '#ffffff',

      backgroundColor: '#000000'

    });

  }

}

第二步，确保你的导航栏支持动态样式。如果你用的是自定义导航栏（比如通过 navigationStyle: custom 配置），那你需要自己实现背景色变化逻辑，而不是依赖 uni.setNavigationBarColor。可以通过绑定样式类来动态调整背景色，例如：

<view class="custom-nav" :style="{ backgroundColor: navBgColor }"></view>

然后在页面的data里定义 navBgColor，在 onPageScroll 中动态更新它：

data() {

  return {

    navBgColor: 'transparent'

  };

},

onPageScroll(e) {

  const scrollTop = e.scrollTop;

  this.navBgColor = scrollTop > 100 ? '#ffffff' : 'transparent';

}

总结一下，onPageScroll 是监听滚动的核心方法，而导航栏颜色的变化可以通过 uni.setNavigationBarColor 或者自定义导航栏的动态样式来实现。看你具体需求选择合适的方式。别忘了测试不同机型的兼容性，有时候小程序的渲染会有坑，多调试几遍吧。

2026-02-15 07:01