uniapp页面实现导航栏随着页面向下滑动逐渐显示向上滑动逐渐隐藏这段代码怎么写请详细给出代码示例

在uni-app中实现导航栏随着页面向下滑动逐渐显示，向上滑动逐渐隐藏，可以通过以下步骤实现：

在页面的<style>标签中定义导航栏的初始样式，包括隐藏导航栏的样式和显示导航栏的样式。

<style>
  .navbar {
    /* 初始状态下隐藏导航栏 */
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.3s, transform 0.3s;
  }
  .navbar.show {
    /* 滑动到一定距离后显示导航栏 */
    opacity: 1;
    transform: translateY(0);
  }
</style>

在页面的<script>标签中添加监听页面滚动的事件，并根据滚动的距离判断是否显示导航栏。

<script>
  export default {
    data() {
      return {
        showNavbar: false, // 是否显示导航栏
        lastScrollTop: 0, // 上一次滚动的位置
      };
    },
    methods: {
      onPageScroll(e) {
        const scrollTop = e.scrollTop;
        const delta = scrollTop - this.lastScrollTop;
        
        // 向下滚动且滚动距离超过100px时显示导航栏
        if (delta > 0 && scrollTop > 100) {
          this.showNavbar = true;
        }
        // 向上滚动且滚动距离超过100px时隐藏导航栏
        else if (delta < 0 && scrollTop > 100) {
          this.showNavbar = false;
        }
        
        this.lastScrollTop = scrollTop;
      },
    },
    onUnload() {
      // 页面卸载时取消监听页面滚动的事件
      uni.pageScrollTo({ scrollTop: 0, duration: 0 });
    },
  };
</script>

在页面的<template>标签中根据showNavbar的值来动态添加或移除导航栏的样式。

<template>
  <view>
    <!-- 导航栏 -->
    <view class="navbar" :class="{ show: showNavbar }"></view>
    <!-- 页面内容 -->
    <view class="content">...</view>
  </view>
</template>

通过以上步骤，就可以实现导航栏随着页面向下滑动逐渐显示，向上滑动逐渐隐藏的效果