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

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

移动

我在开发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();
},

我来解答赞 7 收藏

反馈

1 条解答

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