uniapp页面导航栏渐变

要实现uniapp页面导航栏的渐变效果，可以使用uni-app提供的导航栏插件uni-nav-bar，并结合CSS3的渐变效果来实现。

1. 首先在页面的json文件中引入导航栏插件：

{
  "usingComponents": {
    "uni-nav-bar": "/static/components/uni-nav-bar/uni-nav-bar"
  }
}

2. 在页面的wxml文件中添加导航栏组件，并设置样式：

<uni-nav-bar title="页面标题" background-color="#ffffff" :opacity="opacity" />

其中，opacity是一个动态变量，用来控制导航栏的透明度。

3. 在页面的js文件中，监听页面滚动事件，并根据滚动距离计算opacity的值：

export default {
  data() {
    return {
      opacity: 0,
      scrollTop: 0
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
    this.opacity = Math.min(1, this.scrollTop / 100)
  }
}

在这里，我们设置scrollTop为页面的滚动距离，opacity的值根据scrollTop计算得出。当scrollTop为0时，opacity为0，即导航栏完全透明；当scrollTop为100时，opacity为1，即导航栏完全不透明。

4. 最后，在页面的样式文件中定义导航栏的渐变效果：

.uni-nav-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  transition: opacity 0.2s ease-out;
}

这里使用了CSS3的线性渐变效果，从透明到不透明的渐变。同时，使用了过渡效果，使导航栏的透明度变化更加平滑。

这样，我们就实现了uniapp页面导航栏的渐变效果。