一、简介

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

二、解析

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

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

获取高度代码如下：

onLoad() {let query = uni.createSelectorQuery().in(this);//需要给黄色区域设置一个id标识，在这里是demoquery.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"><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.mainTopconsole.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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！