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

一、背景

最近使用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 = 胶囊按钮距离顶部的距离,这样能使自定义导航栏里的内容始终跟胶囊按钮对齐

相关推荐
2501_915106327 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
用户69903048487517 小时前
uniapp 构建本地txt跨平台小程序、h5、app通用
微信小程序·uni-app
胡八一18 小时前
使用qianjkun uniapp 主应用 集成 vue微应用
前端·vue.js·uni-app
游戏开发爱好者818 小时前
基于uni-app的iOS应用上架,从打包到分发的全流程
android·ios·小程序·https·uni-app·iphone·webview
ᥬ 小月亮19 小时前
Uniapp中自定义导航栏
javascript·css·uni-app
vayy1 天前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
FAIRY_STARS2 天前
记录uni-app好用的select组件
uni-app
FAIRY_STARS2 天前
关于uni-app pages.json配置详解
uni-app
FliPPeDround2 天前
🚀 定义即路由:definePage宏如何让uni-app路由配置原地起飞?
前端·vue.js·uni-app
iOS阿玮2 天前
苹果审核被拒4.8.0条款,快速过审通关指南。
uni-app·app·apple