uniapp首页导航栏颜色渐变

要实现uniapp首页导航栏颜色渐变，可以使用uni-app官方提供的uni-navigation-bar组件，并在页面的onPageScroll函数中监听页面滚动事件，根据滚动距离改变导航栏的背景颜色。

以下是示例代码：

1. 在页面中引入uni-navigation-bar组件

<template>
  <view>
    <uni-navigation-bar title="首页"></uni-navigation-bar>
    <!-- 页面内容 -->
  </view>
</template>

2. 在页面的onPageScroll函数中监听页面滚动事件，并根据滚动距离改变导航栏的背景颜色

<template>
  <view>
    <uni-navigation-bar title="首页" :background-color="navBarBgColor"></uni-navigation-bar>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      navBarBgColor: 'transparent', // 导航栏背景颜色
      maxScrollHeight: 200 // 页面滚动最大距离
    }
  },
  onReachBottom() {
    // 页面滚动事件
    uni.createSelectorQuery().select('#page').fields({
      size: true,
      scrollOffset: true,
      properties: ['scrollY']
    }, (res) => {
      let scrollTop = res.scrollTop
      if (scrollTop < this.maxScrollHeight) {
        // 根据滚动距离改变导航栏的背景颜色
        let opacity = scrollTop / this.maxScrollHeight
        this.navBarBgColor = `rgba(255, 255, 255, ${opacity})`
      } else {
        this.navBarBgColor = 'white'
      }
    }).exec()
  }
}
</script>

在上面的代码中，我们定义了一个maxScrollHeight变量，表示页面滚动的最大距离。当页面滚动距离小于maxScrollHeight时，根据滚动距离改变导航栏的背景颜色，颜色的透明度根据滚动距离计算得出。当页面滚动距离大于等于maxScrollHeight时，导航栏的背景色变为白色。