uniapp——获取某元素距离顶部的距离，并将高度应用到css里面，为实现scroll-view内容而不让整个页面出现滚动条。

一、简介

uni项目运行到小程序，红色区域固定不动，黄色区域是滚动的。切换不同设备能适配，这样就要求黄色区域的高度设定不能是死值。想要实现的效果如下：

二、解析

红色区域的高度在不同设备里面解析出来并不都是一样的，有的手机屏幕长，所以我们需要动态获取黄色区域距离顶部的距离。
黄色区域是scroll-view区域，如果设定固定高度（死值），在不同设备下底部会有白色空隙，最合理的解决方式就是获取她距离顶部的距离top，我们都知道满屏的高度是100vh,所以用100vh减去top，剩下的就是合适的黄色的高度值。
条件：

• 获取当前元素距离顶部的距离是top
• 满屏高度是100vh
• 红色整体高度是100vh - top

获取高度代码如下：

onLoad() {
	let query = uni.createSelectorQuery().in(this);
	//需要给黄色区域设置一个id标识，在这里是demo
	query.select('#demo').boundingClientRect(data => {
		console.log(data.top)//这个就是距离顶部的高度
		this.listTop = data.top//赋值，待会要用
	}).exec();
},
1
2
3
4
5
6
7
8

整体代码：

<template>
	<view class="content">
		<view class="top">
			固定不动
		view>
		<scroll-view scroll-y="true" id="demo" :style="'height:calc(100vh - '+listTop+'px)'" >
			<view v-for="(item,index) in 100" :key="index" style="height: 100rpx;">{{index}}view>
		scroll-view>
	view>
template>

<script>
	export default {
		data() {
			return {
				listTop: 0,
			}
		},
		onLoad() {
			let query = uni.createSelectorQuery().in(this);
			query.select('#demo').boundingClientRect(data => {
				console.log(data)
				this.listTop = data.top
			}).exec();
		},

		methods: {

		}
	}
script>

<style>
	.top {
		height: 500rpx;
		background-color: red;
		margin-bottom: 20rpx;
	}

	scroll-view {
		background-color: yellow;
	}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

注意：css的动态使用

:style="'height:calc(100vh - '+listTop+'px)'"
//另一种
:style="{height: heightArea + 'px'}"
1
2
3

三、解析2

代码：

<template>
	<view class="content">
		
		<view class="headBox">
		
		view>
		
		
		<view class="main" id="main" :style="{height: heightArea + 'px'}">

		view>
		
		
		<view class="bottomBox" id="bottom">

		view>
		
	view>
template>

<script>
	export default {
		data() {
			return {
				mainTop: '',
				bottomTop: '',
				heightArea: ''
			}
		},
		onLoad() {

		},
		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top
			}).exec();
			query.select('#bottom').boundingClientRect(data => {
				console.log(data);
				this.bottomTop = data.top
			}).exec();
			this.heightArea = this.bottomTop - this.mainTop
			console.log(this.heightArea);
		},
		methods: {

		}
	}
script>

<style lang="scss">
	page {
		background-color: #F7F7F7
	}

	// 头部
	.headBox {
		width: 100%;
		height: 137rpx;
		background-color: #ffffff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}

	// 主体部分start
	.main {
		background-color: red;
		position: absolute;
		left: 0;
		top: 137rpx;
		width: 100%;
	}

	// 主体部分end
	// 底部结算
	.bottomBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 127rpx;
		background: #FFFFFF;
		opacity: 0.3;
	}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

如果报错，一定要看看自己代码写在了哪个周期里面。放onReady(){}里面即可

四、参考网址

uni获取高度：
https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery
不同单位之间的计算公式：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
vh单位：
https://www.php.cn/website-design-ask-493011.html