一、简介
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();
},
整体代码：
<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>
注意：css的动态使用
:style="'height:calc(100vh - '+listTop+'px)'"
//另一种
:style="{height: heightArea + 'px'}"
三、解析2
代码：
<template>
<view class="content">
<!-- 头部搜索start -->
<view class="headBox">
</view>
<!-- 头部搜索end -->
<!-- 主体start -->
<view class="main" id="main" :style="{height: heightArea + 'px'}">
</view>
<!-- 主体end -->
<!-- 底部结算start -->
<view class="bottomBox" id="bottom">
</view>
<!-- 底部结算end -->
</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>
如果报错，一定要看看自己代码写在了哪个周期里面。放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