Uniapp开发微信小程序自定义Title，剩余部分scrollview自动填充

计算高度：scroll-view高度 = 窗口高度 - 顶部TITL的高度

一、自定义公共头部导航栏组件

1、创建一个com-title.vue

主要通过uni.getSystemInfo获取手机的类型，根据IOS系统或Android系统设置手机状态栏的高度。

getStatusBar() {
	let that = this;
	//通过uni自带api获取手机系统信息
	uni.getSystemInfo({
		success: function(res) {
			that.statusBarHeight = res.statusBarHeight; //手机状态栏高度
			let isiOS = res.system.indexOf('iOS') > -1; //是否为iOS系统
			that.barHeight = isiOS ? 44 : 48; //导航栏高度，iOS：44，Android：48
			that.barWidth = res.windowWidth - 87; //nabbar可操作宽度 = 屏幕宽度 - 小程序右上角的胶囊宽度（87）
		}
	});
}

com-title.vue完整代码

<template>
	<view style="background-color: steelblue;">
		<view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="status_bar" :style="{ height: barHeight + 'px' }">
			<view class="top_nav_bar" :style="{ width: barWidth + 'px' }">
				<view class="nav_bar_back" :style="{ height: barHeight + 'px', width: barHeight + 'px'}" @click="goBack">
					<u-icon name="arrow-left" color="#FFFFFF" size="45rpx"></u-icon>
				</view>
				<view class="nav_bar_back_home" :style="{ height: barHeight + 'px', width: barHeight + 'px'}" @click="goHome">
					<u-icon name="home-fill" color="#FFFFFF" size="45rpx"></u-icon>
				</view>
				<text class="nav_bar_title" :style="{ lineHeight: statusBarHeight + 'px' }">{{ title }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'com-title',
		props: {
			title: String,
			typeNameImg: {
				type: String,
				name: 'img'
			},
			icon:{
				type: Boolean,
				default: false
			},
			image:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				title: '',
				statusBarHeight: 20,
				barHeight: 44,
				barWidth: null,
				isShare: 0
			}
		},
		created() {
			//获得小程序自带导航栏高度
			this.getStatusBar();
		},
		methods: {
			goBack() {
				console.log("----------> goBack")
				uni.navigateBack()
			},
			goHome(item) {
				console.log("----------> goHome")
				this.$emit('click-home');
			},
			getStatusBar() {
				let that = this;
				//通过uni自带api获取手机系统信息
				uni.getSystemInfo({
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight; //手机状态栏高度
						let isiOS = res.system.indexOf('iOS') > -1; //是否为iOS系统
						that.barHeight = isiOS ? 44 : 48; //导航栏高度，iOS：44，Android：48
						that.barWidth = res.windowWidth - 87; //nabbar可操作宽度 = 屏幕宽度 - 小程序右上角的胶囊宽度（87）
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.status_bar{
		width: 100vw;
	}
	
	.top_nav_bar{
		height: 100%; 
		display: flex;
		justify-content: flex-start;
	}
	
	.nav_bar_back{
		display: flex;
		justify-items: center; 
		justify-content: center;
	}
	
	.nav_bar_back_home{
		display: flex;
		justify-items: center; 
		justify-content: center;
	}
	
	.nav_bar_title{
		padding-left: 20rpx; 
		color: #FFFFFF; 
		size: 50rpx; 
		font-weight: 600;
	}

</style>

2、设置scroll-view填充（除title）剩余部分

主要通过uni.getSystemInfo获取手机的窗口高度，然后获取指定元素高度（头部+状态栏），计算出剩余部分窗口的高度用scroll-view填充。

scrollViewHeight() {
	let _this = this;
	uni.getSystemInfo({ 	// 调用uni-app接口获取屏幕高度
		success(res) { 			// 成功回调函数
			let wHeight = res.windowHeight // windoHeight为窗口高度，主要使用的是这个
			let titleHeight = uni.createSelectorQuery().select(".title"); // 想要获取高度的元素名（class/id）
			titleHeight.boundingClientRect(data => {
				  _this.scrollHeight = wHeight - data.height  // 计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
			}).exec()
		}
	})
}

页面完整代码

<template>
	<view>
		<view class="title">
			<com-title title="Test信息"></com-title>
		</view>
		<scroll-view class="scroll-view" :style="{ height: scrollHeight + 'px' }" scroll-y @scrolltolower="reachLower">
			<view v-for="(item,index) in listData" style="width: 100%; height: 300rpx; background: yellowgreen;">
				{{item.name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import comTitle from '@/pages-first/components/com-title/com-title.vue'
	export default {
		components: {
			comTitle
		},
		data() {
			return {
				title: 'Pages Third1',
				scrollHeight: 0, //元素的所需高度
				isLoadMore: false,
				listData: [
					{id: 1, name: '测试数据01'},
					{id: 2, name: '测试数据02'},
					{id: 3, name: '测试数据03'},
					{id: 4, name: '测试数据04'},
					{id: 5, name: '测试数据05'},
					{id: 6, name: '测试数据06'},
					{id: 7, name: '测试数据07'},
					{id: 8, name: '测试数据08'},
					{id: 9, name: '测试数据09'},
					{id: 10, name: '测试数据10'},
					{id: 11, name: '测试数据11'},
					{id: 12, name: '测试数据12'},
				]
			}
		},
		mounted() {
			this.scrollViewHeight();
		},
		methods: {
			error(){
				console.log('------->');
			},
			reachLower(e){
				this.isLoadMore = true;
				console.log('到达底部------->', e);
				setTimeout(() => {
					this.isLoadMore = false;
				}, 3000)
			},
			scrollViewHeight() {
				let _this = this;
				uni.getSystemInfo({ 	// 调用uni-app接口获取屏幕高度
				  success(res) { 			// 成功回调函数
				    let wHeight = res.windowHeight // windoHeight为窗口高度，主要使用的是这个
						let titleHeight = uni.createSelectorQuery().select(".title"); // 想要获取高度的元素名（class/id）
				    titleHeight.boundingClientRect(data => {
				      _this.scrollHeight = wHeight - data.height  // 计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
				    }).exec()
				  }
				})
			}
		}
	}
</script>

<style>

</style>

内容为个人项目中的使用，如有对您有所帮助不胜荣幸。3Q！