uni-app 页面下拉底部导航栏消失不见

uni-app 页面下拉底部导航栏消失不见

开发环境 版本号 项目创建方式
HBuilderX 3.95 云端

操作步骤：

  • IOS16系统，页面下滑

预期结果：

  • 希望尽快修复

实际结果：

  • 如果官方没有修复，想知道造成这种情况的原因大概率是什么，还有没有方法可以复现呢

bug描述：

  • H5页面滑动，默认底部导航栏会消失不见，之前只存在于 IOS16系统中，但是现在IOS16暂时也复现不了这个bug了，请问官方是否之前有修复过相关的bug

更多关于uni-app 页面下拉底部导航栏消失不见的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

如果官方没有修复，想知道造成这种情况原因大概率是啥阿，现在怎么又不能复现了

更多关于uni-app 页面下拉底部导航栏消失不见的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，如果你希望页面在下拉时底部导航栏消失，可以通过以下几种方式实现：

1. 使用 scroll-view 组件

scroll-view 是 uni-app 提供的一个可滚动的视图容器。你可以在页面中使用 scroll-view 包裹内容，并通过监听滚动事件来控制底部导航栏的显示与隐藏。

<template>
  <view>
    <scroll-view
      scroll-y
      @scroll="handleScroll"
      :style="{ height: scrollHeight + 'px' }"
    >
      <!-- 页面内容 -->
      <view v-for="item in 100" :key="item">Item {{ item }}</view>
    </scroll-view>
    <view class="bottom-nav" :style="{ display: showNav ? 'flex' : 'none' }">
      <!-- 底部导航栏内容 -->
      <view>Home</view>
      <view>Profile</view>
      <view>Settings</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollHeight: 0,
      showNav: true,
      lastScrollTop: 0,
    };
  },
  onLoad() {
    // 获取屏幕高度
    uni.getSystemInfo({
      success: (res) => {
        this.scrollHeight = res.windowHeight;
      },
    });
  },
  methods: {
    handleScroll(e) {
      const scrollTop = e.detail.scrollTop;
      if (scrollTop > this.lastScrollTop) {
        // 向下滚动
        this.showNav = false;
      } else {
        // 向上滚动
        this.showNav = true;
      }
      this.lastScrollTop = scrollTop;
    },
  },
};
</script>

<style>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #ddd;
}
</style>

2. 使用 page 的 onPageScroll 生命周期

onPageScroll 是 uni-app 提供的页面滚动生命周期函数。你可以通过监听页面的滚动事件来控制底部导航栏的显示与隐藏。

<template>
  <view>
    <!-- 页面内容 -->
    <view v-for="item in 100" :key="item">Item {{ item }}</view>
    <view class="bottom-nav" :style="{ display: showNav ? 'flex' : 'none' }">
      <!-- 底部导航栏内容 -->
      <view>Home</view>
      <view>Profile</view>
      <view>Settings</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showNav: true,
      lastScrollTop: 0,
    };
  },
  onPageScroll(e) {
    const scrollTop = e.scrollTop;
    if (scrollTop > this.lastScrollTop) {
      // 向下滚动
      this.showNav = false;
    } else {
      // 向上滚动
      this.showNav = true;
    }
    this.lastScrollTop = scrollTop;
  },
};
</script>

<style>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #ddd;
}
</style>

3. 使用 CSS 动画

如果你希望底部导航栏在滚动时有一个平滑的过渡效果，可以使用 CSS 动画来实现。

<template>
  <view>
    <!-- 页面内容 -->
    <view v-for="item in 100" :key="item">Item {{ item }}</view>
    <view class="bottom-nav" :class="{ 'hide-nav': !showNav }">
      <!-- 底部导航栏内容 -->
      <view>Home</view>
      <view>Profile</view>
      <view>Settings</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showNav: true,
      lastScrollTop: 0,
    };
  },
  onPageScroll(e) {
    const scrollTop = e.scrollTop;
    if (scrollTop > this.lastScrollTop) {
      // 向下滚动
      this.showNav = false;
    } else {
      // 向上滚动
      this.showNav = true;
    }
    this.lastScrollTop = scrollTop;
  },
};
</script>

<style>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #ddd;
  transition: transform 0.3s ease;
}

.hide-nav {
  transform: translateY(100%);
}
</style>
回到顶部