El problema con la altura adaptativa de la vista de desplazamiento en la aplicación uni es llenar la altura restante y ser altamente adaptable

Usando el marco frontal de uni-app, debe desplegar para actualizar los datos. Habrá un espacio en blanco debajo, es decir, cómo hacer que scorll-view llene automáticamente la altura restante en la pantalla. Encontré mucho de tutoriales en Internet, pero los detalles no son suficientes. ¡Esta vez debería ser un récord en el proceso de aprendizaje! Los amigos que lo necesiten pueden llevárselo y echarle un vistazo.

Ideas:

1. Use la interfaz API uni.getSystemInfo(OBJECT) para obtener la altura de la pantalla del dispositivo

2. Use uni.createSelectorQuery() para obtener la distancia desde el elemento hasta la parte superior de la pantalla

Proceso de implementación:

1. El código de la parte de la página (solo poner la parte que se necesita obtener, y otras partes de acuerdo a la situación)

// 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. La idea principal de la parte JS del código es: a través de la altura visible de la pantalla - la altura del elemento desde arriba = la altura restante de la pantalla (altura del elemento);

El código en la parte de datos: define los parámetros que aceptan datos de antemano.

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

onReady parte del código: obtener la altura cada vez que se actualiza la página

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