uniapp 如何实现下滑隐藏上滑显示效果

在uniapp中想要实现类似头条、抖音那样的滑动隐藏效果：页面下滑时顶部导航栏隐藏，上滑时又显示出来。请问应该如何实现这个功能？目前尝试了scroll-view的@scroll事件监听滚动方向，但隐藏和显示的动画效果不太流畅。有没有成熟的解决方案或者组件推荐？最好能提供具体代码示例。

2 回复

使用 onPageScroll 监听页面滚动，通过计算滚动距离控制元素显示/隐藏。示例代码：

data() {
  return { showHeader: true, lastScrollTop: 0 }
},
onPageScroll(e) {
  const current = e.scrollTop
  this.showHeader = current < this.lastScrollTop
  this.lastScrollTop = current
}

模板中用 v-show="showHeader" 控制元素显隐。


在 UniApp 中，可以通过监听页面滚动事件，结合 CSS 动画实现下滑隐藏、上滑显示的效果（例如导航栏或标题栏）。以下是实现步骤及示例代码：

实现思路

  1. 使用 onPageScroll 监听页面滚动。
  2. 根据滚动方向（通过对比上一次和当前滚动位置）判断显示或隐藏元素。
  3. 通过动态 class 或 style 控制元素的显示/隐藏动画。

示例代码

<template>
  <view>
    <!-- 需要隐藏/显示的元素，例如导航栏 -->
    <view class="header" :class="{ 'header-hidden': isHidden }">
      我是顶部导航栏
    </view>
    
    <!-- 页面内容 -->
    <view class="content">
      <!-- 这里放长列表或其他内容，确保可以滚动 -->
      <view v-for="item in 100" :key="item">列表项 {{ item }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isHidden: false, // 控制隐藏状态
      lastScrollTop: 0, // 上一次滚动位置
    };
  },
  onPageScroll(e) {
    const scrollTop = e.scrollTop;
    // 判断滚动方向：向下滚动隐藏，向上滚动显示
    if (scrollTop > this.lastScrollTop && scrollTop > 50) {
      // 向下滚动且超过阈值时隐藏
      this.isHidden = true;
    } else {
      // 向上滚动时显示
      this.isHidden = false;
    }
    // 更新上一次滚动位置
    this.lastScrollTop = scrollTop;
  },
};
</script>

<style>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #007AFF;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease; /* 添加过渡动画 */
  z-index: 999;
}

.header-hidden {
  transform: translateY(-100%); /* 向上隐藏 */
}

.content {
  margin-top: 100rpx; /* 避免内容被固定头部遮挡 */
  padding: 20rpx;
}
</style>

关键点说明

  • onPageScroll：UniApp 页面生命周期函数，监听滚动事件。
  • 滚动方向判断：通过比较当前 scrollTop 和上一次值确定方向。
  • CSS 动画：使用 transform: translateY 结合 transition 实现平滑隐藏/显示效果。
  • 阈值处理：添加 scrollTop > 50 避免轻微滚动误触发。

优化建议

  • 可调整 transition 时间或使用 transform 替代 top 属性以获得更好性能。
  • 根据实际需求调整隐藏/显示的滚动阈值（示例中为 50px）。

以上代码在 UniApp 中测试有效，适用于导航栏、标题栏等元素的动态显示控制。

回到顶部