【uni-app】滚动问题处理。固定头部，局部内容滚动

1、使局部内容滚动：

如代码：uni-info-content内容过长需要滚动，标题和基本信息部分固定。

<template>
	<view class="info-body">
		<view class="uni-box-head">
			<uni-title type="h1" align="center" :title="form.title"></uni-title>
		</view>
		<view class="uni-info">
			<text class="uni-info-text">{{form.name}}</text>
			<text class="uni-info-text">{{form.time}}</text>
		</view>
		<scroll-view scroll-y="true" class="sv" :style="{height:navHeight+'px'}">
			<view class="uni-info-content">
				<text v-html="form.content"></text>
			</view>
		</scroll-view>
	</view>
</template>

//数据定义
data() {
		return {
				pH: 0, //窗口高度
				navHeight: 0, //元素的所需高度
				id: null,
				form: {},
			}
		},

2、加生命周期

使用生命周期onReady的方式获取不到渲染数据后的真实高度，需封装为方法，再在渲染完数据后延时调用见到3：

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

3、封装和调用高度设置方法

methods: {
    //数据请求
	getInforData() {
		getInfor(this.id).then(res => {
			this.form = res.data;
			let sefe = this;
			setTimeout(function() {
			//延时调用
				sefe.setLayout()
			}, 500)
		})
	},
	//设置内容高度
	setLayout() {
		let that = this;
		uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
			success(res) { //成功回调函数
				that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
				let titleH = uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名（class/id）
				titleH.boundingClientRect(data => {
					let pH = that._data.pH;
					that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					console.log(pH, that._data.navHeight, data.top)
				}).exec()
			}
		})
	},
}

4、原样式设置：

（注释不用了，高度定死不适用，采用scroll-view方法）

.uni-info-content {
		// overflow-y: auto;
		// height: 80vh;
	}

5、此时如果内容过多，外层会出现滚动，在uni.scss加入

（使用该方式会影响到全局页面，不推荐，见到6）

uni-page-body, html, body {
	overflow:hidden; 
	height:100vh;
}

6、处理整体页面滚动问题

1、data加入变量：bodyNavHeight: 0,//整体高度

data() {
	return {
			pH: 0, //窗口高度
			bodyNavHeight: 0, //元素的所需高度
			navHeight: 0, //元素的所需高度
			id: null,
			form: {},
		}
	},

2、外层info-body加入样式： :style=“{height:bodyNavHeight+‘px’}”

<template>
	<view class="info-body" :style="{height:bodyNavHeight+'px'}">
		......
	</view>
</template>

3、加入生命周期：

onReady() {
	let that = this;
	uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
		success(res) { //成功回调函数
			that._data.bodyNavHeight = res.windowHeight //windoHeight为窗口高度
		}
	})
},