uniapp自定义底部导航栏，解决下拉时候顶部空白的问题

确实菜，真的爱2025-04-18 10:34

一、背景

最近使用uniapp开发微信小程序，因为使用了自定义的顶部导航栏，所以在ios平台上（Android未测试）测试的时候，下拉的时候会出现整个页面下拉并且顶部留下大片空白的问题

二、任务：解决这个问题

经查阅资料，在这个使用自定义导航栏的页面，首先需要设置

javascript 复制代码

		{
			"path" : "pages/test/index",
			"style" : 
			{
				"navigationBarTitleText" : "原生导航栏",
				"navigationStyle":"custom",
				"disableScroll":true
			}
		}

其中 "disableScroll":true是关键，这样设置下来，可以解决问题，但是整个页面都不能滑动，这显然不合理。所以在内容展示区需要用scroll-view 来包裹，高度需要动态设置，也就是整个页面的高度-自定义导航栏的高度

javascript 复制代码

	  <scroll-view 
	  scroll-y="true" 
	  class="scrollw" 
	  :style="{height:`calc(100% - ${barheight}px)`}"
	  refresher-enabled
	  :refresher-triggered="refreshStatus"
	  refresher-threshold
	  refresher-default-style="white"
	  refresher-background="#4cd964"
	  @scrolltoupper="handleToUpper"
	  @scrolltolower="handleToLower"
	  @refresherrefresh="handlePullDownRefresh">
	  <view class="content" v-for="i in count" :key="i">
	  	<view class="">
	  		顶部 刷新 {{i}}
	  	</view>
		<view class="bootom">
			底部  {{i}}
		</view>
	
	  </view>
	  <view class="loading" v-if="loading">
	  	努力加载中...
	  </view>
	  <view class="loading" v-else>
	  	已经没有更多了
	  </view>
	  </scroll-view>

通过，@refresherrefresh和@scrolltolower可以实现自定义的下拉刷新和触底加载更多的功能

三、自定义导航栏高度

有两种方式：通过公式：自定义导航栏高度 = 状态栏高度 + 胶囊按钮高度 + （胶囊按钮距离顶部 - 状态栏高度） * 2

一、

二、直接用 const {safeAreaInsets} = uni.getWindowInfo() + 44（44是规定的）

自定义导航栏里的内容padding-top = 胶囊按钮距离顶部的距离，这样能使自定义导航栏里的内容始终跟胶囊按钮对齐