uniapp实现自定义导航时 动态获取导航栏的高度 屏幕高度适配

App.vue 配置部分

// App.vue
import Vue from 'vue';
export default {
    
    
	  onLaunch: function() {
    
    
		  this.setAppInfo()
	  },
	  methods: {
    
    
			// 获取系统栏高度
			setAppInfo() {
    
    
				uni.getSystemInfo({
    
    
					success: function(e) {
    
    
						Vue.prototype.StatusBar = e.statusBarHeight;
						// Vue.prototype的应用 这篇博文详细讲解
						// https://blog.csdn.net/ZYS10000/article/details/107233453?spm=1001.2014.3001.5506
					}
				})
			}
	  }
}

page页面使用部分

	<view class="ceshi-warp">
		<image v-if="!scrollTopBg" class="image_bg" src="../../static/img/top-back.png" mode=""></image>
		<!-- 页面滚动下拉时头部导航栏展示不同的图片效果 没有可以删除 -->
		<view class="head-warp">
			<image v-if="scrollTopBg" class="head_bg" src="../../static/img/top-back-small.png" mode=""></image>
			<!-- 页面滚动下拉时头部导航栏展示不同的图片效果 没有可以删除 -->
			<view class="head" :style="{top:statusBarHeight+'px'}">
				<view class="back" @click="navBack()"><text class="iconfont icon-icon_direction_leftoutlined"></text>
				</view>
				<view class="title">我是标题</view>
			</view>
		</view>
		<!-- 这个48用的是 head 样式里面的高度，里面用的是96upx,这种我一般直接写死，或者从手动除以二计算-->
		<view class="content" :style="{top:statusBarHeight+48+'px'}">我是内容</view>
	</view>

导航栏高度适配参数赋值部分

		onLoad() {
    
    
			this.statusBarHeight = this.StatusBar // App.vue 配置的参数对当前页面参数的赋值
		}

图片展示类似于这种


控制图片显示隐藏部分

//监听滚动，改变搜索框的值，tbr的位置
		onPageScroll(e) {
    
    
			this.scrollTop = e.scrollTop
			if (this.scrollTop > 10) {
    
    
				this.scrollTopBg = true
			} else {
    
    
				this.scrollTopBg = false
			}
		},