You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现上下滚动时导航栏搜索栏完全显示/隐藏?

解决导航栏SearchBar滚动时仅完全显示/隐藏的问题

系统默认实现方案(无需手动写代理)

  • 用UISearchController配合系统属性
    如果你是通过UISearchController将搜索栏嵌入导航栏,设置searchController.hidesNavigationBarDuringPresentation = false,再结合导航栏的prefersLargeTitles(如果使用大标题样式),系统会自动处理滚动时的显示逻辑,避免出现部分露出的情况。
  • 将SearchBar设为导航栏titleView
    直接把UISearchBar赋值给navigationItem.titleView,这种方式下,滚动时导航栏的整体显示/隐藏会带动搜索栏同步变化,不会出现半露的状态,Notes、WhatsApp这类App大多采用这种实现。

自定义逻辑方案(scrollViewDidScroll实现)

如果上述默认方式不符合你的需求,再通过滚动代理手动控制:

  1. 在scrollViewDidScroll方法中监听滚动偏移量
  2. 以搜索栏的高度为临界值,判断滚动方向和偏移量
  3. 超过临界值时完全隐藏导航栏(或搜索栏),反之则完全显示
    示例代码:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let searchBarHeight = navigationItem.titleView?.frame.height ?? 44
    let offsetY = scrollView.contentOffset.y
    // 根据实际需求调整判断逻辑,比如加入滚动方向判断避免频繁切换
    if offsetY > searchBarHeight {
        navigationController?.setNavigationBarHidden(true, animated: true)
    } else {
        navigationController?.setNavigationBarHidden(false, animated: true)
    }
}

内容的提问来源于stack exchange,提问作者JN0514

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.24 22:12:02