uniapp 小程序 自定义导航栏如何在页面滑动时显示

在uniapp开发小程序时，如何实现自定义导航栏在页面滑动时显示？目前设置的导航栏在页面静止时正常显示，但一旦滑动页面就会消失。希望达到类似原生导航栏的效果：页面静止时隐藏，滑动时自动显示导航栏。请问该如何实现这个功能？需要修改哪些配置或添加什么代码？

2 回复

在uniapp中，自定义导航栏滑动显示可通过监听页面滚动实现。在onPageScroll事件中判断滚动距离，动态修改导航栏样式或显示状态。例如：scrollTop > 50时显示导航栏，通过v-if或动态class控制。需注意兼容不同平台差异。


在 UniApp 小程序中，自定义导航栏在页面滑动时显示，可以通过监听页面滚动事件并动态修改导航栏样式来实现。以下是实现步骤：

1. 隐藏默认导航栏

在 pages.json 中设置页面样式，隐藏默认导航栏：

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

2. 页面结构

在页面模板中，添加自定义导航栏容器，并绑定动态类名：

<template>
  <view>
    <!-- 自定义导航栏 -->
    <view :class="['custom-navbar', { 'navbar-fixed': isNavbarFixed }]">
      <!-- 导航栏内容，例如返回按钮和标题 -->
      <view class="navbar-content">
        <text>自定义标题</text>
      </view>
    </view>
    
    <!-- 页面内容 -->
    <view class="content" @scroll="onPageScroll">
      <!-- 其他内容 -->
    </view>
  </view>
</template>

3. 样式设置

在样式文件中，定义导航栏的初始和固定状态：

.custom-navbar {
  height: 44px; /* 导航栏高度 */
  background: transparent; /* 初始透明 */
  transition: background 0.3s; /* 平滑过渡 */
}

.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff; /* 滑动时显示背景色 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选阴影 */
}

.content {
  height: 100vh;
  overflow-y: auto;
}

4. 逻辑处理

在页面脚本中，监听滚动事件，根据滚动位置切换导航栏状态：

export default {
  data() {
    return {
      isNavbarFixed: false
    };
  },
  methods: {
    onPageScroll(e) {
      // 当滚动超过一定阈值（例如50px）时显示导航栏
      if (e.scrollTop > 50) {
        this.isNavbarFixed = true;
      } else {
        this.isNavbarFixed = false;
      }
    }
  }
};

说明：

  • 通过 @scroll 监听页面滚动，动态切换 isNavbarFixed 状态。
  • 使用 CSS 类 navbar-fixed 控制导航栏固定和背景显示。
  • 可根据实际需求调整滚动阈值和样式。

此方法适用于需要滚动时显示导航栏的场景，确保用户体验流畅。

回到顶部