当前位置：首页 > news >正文

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

news 来源：原创 2025/5/20 12:37:24

一、背景

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

二、任务：解决这个问题

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

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

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

	  <scroll-view scroll-y="true" class="scrollw" :style="{height:`calc(100% - ${barheight}px)`}"refresher-enabled:refresher-triggered="refreshStatus"refresher-thresholdrefresher-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 = 胶囊按钮距离顶部的距离，这样能使自定义导航栏里的内容始终跟胶囊按钮对齐