【Uniapp小程序】自定义导航栏uni-nav-bar滚动渐变色

在uniapp中实现自定义导航栏uni-nav-bar的滚动渐变色效果，可以通过监听页面滚动事件，然后根据页面的滚动距离来动态改变导航栏的背景色。

以下是实现这一效果的示例代码：

<template>
  <view>
    <view class="uni-nav-bar" :style="{ backgroundColor: navBarColor }">
      <!-- 导航栏内容 -->
    </view>
    <!-- 页面内容 -->
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      // 初始导航栏颜色
      navBarColor: '#ffffff',
      // 滚动阈值，决定何时开始颜色变化
      threshold: 100
    };
  },
  onPageScroll(e) {
    // 当页面滚动超过阈值时改变导航栏颜色
    if (e.scrollTop > this.threshold) {
      this.navBarColor = '#ff0000'; // 这里设置为红色作为演示
    } else {
      this.navBarColor = '#ffffff'; // 恢复初始颜色
    }
  }
};
</script>
 
<style>
.uni-nav-bar {
  /* 导航栏样式 */
}
</style>

在这个例子中，.uni-nav-bar 是自定义的导航栏类。navBarColor 是绑定到导航栏的背景色样式，它会根据页面滚动事件来更新。onPageScroll 方法中的逻辑判断页面滚动的距离是否超过了阈值 threshold，若超过则将 navBarColor 改为渐变后的颜色，否则恢复初始颜色。

你可以根据实际需求调整 threshold 值和颜色变化的逻辑。