当前位置：首页 > uni-app

uniapp实现标题栏渐变

2026-01-13 19:50:17uni-app

实现标题栏渐变的方法

在UniApp中实现标题栏渐变效果，可以通过修改页面的导航栏样式或使用自定义导航栏来实现。以下是几种常见的方法：

方法一：使用原生导航栏渐变

通过修改pages.json中的navigationBarBackgroundColor属性，结合CSS实现渐变效果。这种方法适用于简单的渐变需求。

在pages.json中配置：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "rgba(0, 0, 0, 0)"
      }
    }
  ]
}

在页面中添加样式：

.uni-page-head {
  background: linear-gradient(to right, #ff0000, #0000ff);
}

方法二：自定义导航栏

如果需要更复杂的渐变效果，可以隐藏原生导航栏并使用自定义组件。

在pages.json中隐藏原生导航栏：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "custom"
      }
    }
  ]
}

在页面中添加自定义导航栏组件：

<template>
  <view>
    <view class="custom-navbar" :style="{ background: gradient }">
      <text class="title">标题</text>
    </view>
    <view class="content">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gradient: 'linear-gradient(to right, #ff0000, #0000ff)'
    };
  }
};
</script>

<style>
.custom-navbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.content {
  margin-top: 44px;
}
</style>

方法三：监听滚动实现动态渐变

结合页面滚动事件，动态改变导航栏的透明度或颜色。

uniapp实现标题栏渐变

<template>
  <view>
    <view class="custom-navbar" :style="{ background: gradient }">
      <text class="title">标题</text>
    </view>
    <scroll-view scroll-y @scroll="handleScroll">
      <!-- 页面内容 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gradient: 'rgba(255, 0, 0, 0)'
    };
  },
  methods: {
    handleScroll(e) {
      const scrollTop = e.detail.scrollTop;
      const opacity = Math.min(scrollTop / 100, 1);
      this.gradient = `rgba(255, 0, 0, ${opacity})`;
    }
  }
};
</script>