微信小程序（uniapp）自定义导航栏

微信小程序自定义导航栏实现指南（基于uView组件）

目录

前言

微信小程序原生导航栏功能有限，无法实现复杂的交互效果。当需要实现类似下图的动态导航栏效果时（标题与搜索框随滚动切换），就需要使用自定义导航栏方案。本文将介绍如何使用uView UI框架的u-navbar组件实现这一效果。

一、微信小程序导航栏基础

1. 导航栏类型

微信小程序导航栏分为两种模式：

• default（默认）：原生导航栏，支持基础样式设置
• custom（自定义）：完全自定义导航栏，需自行处理布局和交互

2. 原生导航栏配置

在pages.json中配置页面导航栏样式：

{
  "pages": [
    {
      "path": "pages/index",
      "style": {
        "navigationStyle": "custom" // 取消原生导航栏
      }
    },
    {
      "path": "pages/myselfs",
      "style": {
        "navigationBarTitleText": "个人中心",
        "navigationBarBackgroundColor": "#ffffff"
      }
    }
  ]
}

二、动态导航栏实现方案

1. 技术选型

使用uView UI框架的u-navbar组件，优势：

• 内置多种导航栏样式
• 支持插槽自定义内容
• 完善的滚动交互处理

2. 核心实现思路

• 监听页面滚动事件
• 根据滚动距离计算透明度
• 动态切换导航栏内容（标题/搜索框）
• 平滑过渡背景色变化

3. 完整代码实现

模板部分

<template>
  <view class="page-container">
    <!-- 自定义导航栏 -->
    <u-navbar 
      height="44" 
      title-size="36" 
      title-bold 
      title-color="#ffffff" 
      :is-back="false" 
      :background="background" 
      :border-bottom="false"
    >
      <!-- 标题模式 -->
      <view class="nav-content" v-if="opacity < 0.5">
        <text class="nav-title">Test·我是标题</text>
      </view>
      
      <!-- 搜索模式 -->
      <view class="nav-content" v-else>
        <u-search 
          placeholder="搜索你感兴趣的" 
          :action-style="{color: '#ffffff'}" 
          v-model="keyword"
          shape="square"
        ></u-search>
      </view>
    </u-navbar>
    
    <!-- 页面内容（用于滚动测试） -->
    <scroll-view scroll-y class="content" @scroll="handleScroll">
      <view class="content-item" v-for="(item, index) in 30" :key="index">
        内容区块 {{index + 1}}
      </view>
    </scroll-view>
  </view>
</template>

脚本部分

export default {
  data() {
    return {
      opacity: 0,          // 透明度值
      keyword: '',          // 搜索关键词
      background: {         // 导航栏背景
        backgroundColor: 'rgba(0, 0, 0, 0)'
      },
      scrollTop: 0          // 滚动距离
    }
  },
  
  watch: {
    // 监听透明度变化更新背景色
    opacity(newVal) {
      this.background.backgroundColor = `rgba(123,104,238,${newVal})`
    }
  },
  
  methods: {
    // 滚动事件处理
    handleScroll(e) {
      const scrollTop = e.detail.scrollTop
      // 计算透明度（0-1之间）
      let opacity = (scrollTop / 100).toFixed(2)
      this.opacity = Math.min(opacity, 1)
      this.scrollTop = scrollTop
    }
  }
}
</script>

样式部分

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .nav-title {
    color: #1D1F20;
    font-size: 36rpx;
    font-weight: 600;
  }
}

.content {
  flex: 1;
  height: calc(100vh - 44px);
  
  .content-item {
    height: 200rpx;
    margin: 20rpx;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8rpx;
  }
}

三、关键点解析

1. 透明度计算逻辑

// 根据滚动距离计算透明度（0-1之间）
let opacity = (scrollTop / 100).toFixed(2)
this.opacity = Math.min(opacity, 1)

• 滚动100px时透明度达到1
• 使用Math.min确保不超过最大值

2. 内容切换策略

<view v-if="opacity < 0.5">标题</view>
<view v-else>搜索框</view>

• 透明度<0.5时显示标题
• 透明度≥0.5时显示搜索框
• 实现平滑过渡效果

3. 性能优化建议

1. 节流处理：对滚动事件添加节流，避免频繁触发
2. CSS过渡：为内容切换添加CSS过渡效果
3. 虚拟滚动：长列表使用虚拟滚动提升性能

四、常见问题解决方案

1. 滚动监听不生效

• 确保使用scroll-view而非页面原生滚动
• 检查是否正确绑定@scroll事件

2. 透明度变化不流畅

• 增加透明度计算的分母值（如改为150）
• 添加CSS过渡效果：

.nav-content {
  transition: all 0.3s ease;
}

3. 不同机型适配问题

• 使用rpx单位确保尺寸适配
• 测试不同机型的表现，调整关键参数

五、总结与展望

本文实现了微信小程序中动态导航栏的核心功能，通过监听滚动事件和透明度计算，实现了标题与搜索框的平滑切换。未来可以扩展的方向包括：

1. 添加更多交互状态（如返回按钮显示/隐藏）
2. 实现更复杂的背景渐变效果
3. 结合下拉刷新等组件构建完整页面