uni-app中scroll-view的自适应高度的问题，实现填满剩下的高度且高度自适应

本文链接：https://blog.csdn.net/qq_39236283/article/details/129591832

本文介绍了在uni-app中使用前端框架实现下拉刷新数据时，如何处理滚动视图自动填满屏幕上剩余高度的问题。通过uni.getSystemInfo获取设备屏幕高度，然后利用uni.createSelectorQuery获取元素到屏幕顶部的距离，计算出元素所需高度，从而实现滚动视图的适配。

摘要由CSDN通过智能技术生成

使用uni-app的前端框架，需要实现下拉刷新数据，遇到下面会有留白，就是如何是scorll-view自动填满屏幕上剩下的高度，在网上找了很多教程，但是详细的并不太多。此次就当是在学习过程中的一个记录吧！有需要的朋友可以拿走看看。

思路：

1.使用uni.getSystemInfo(OBJECT)API接口获取设备屏幕高度

2.使用uni.createSelectorQuery()获取元素到屏幕顶部的距离

实现过程：

1.页面部分的代码（只放需要获取的部分了其他部分根据情况来）

// scroll-view的代码 class名为sv 使用:style动态绑定高度
<scroll-view scroll-y="true" class="sv" :style="{height:navHeight+'px'}">
    <view class="listItem" v-for="(item,index) in tvArry" :key="index" @click="skip">
        <view class="leftBox">
            <image :src="item.themb" class="leftImg"></image>
        </view>
        <view class="rightBox">
            <view class="title">{{item.name}}</view>
            <view class="sTitle">
                {{item.name}}{{item.time}}
            </view>
        </view>
    </view>
</scroll-view>

2.JS部分代码主要思路就是：通过屏幕可见高度-元素距离顶部的高度=屏幕剩余高度（元素高度）；

data部分的代码：提前定义好接受数据的参数。

// data部分的代码
data() {
    return {
        pH:0, //窗口高度
        navHeight:0, //元素的所需高度
    }
},

onReady部分代码：每次刷新页面获取一次高度

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()
        }
    })
},