scroll-view自适应剩余高度

参考网站

思路：

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

2.使用uni.createSelectorQuery('.XX')获取元素到屏幕顶部的距离(注意: 这里获取的是想自适应高度控件的高度 , 填写classId时前面的 . 不要忘记了 )

3. 元素高度 = 设备高度 - 元素到屏幕顶部的距离

注意: 获取到的元素高度,会自动去除系统导航栏和工具栏的高度的

• 获取单个元素在剩余空间中的自适应高度

WeChata8c4c667dd13481c56d0c43842ec8f86.jpg

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

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

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

/*   通过传自身的 classId 获取自适应高度,  注意: 是自身的 classId;    单位为: px   */
    onReady() {
       let that = this;
        uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
           success(res) { //成功回调函数
           that.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
           let titleH = uni.createSelectorQuery().select('.panl3'); //想要获取高度的元素名（class/id）
           titleH.boundingClientRect(data => {
                let pH = that.pH;
                console.log('-- 元素距离顶部的距离:', data.top);
                console.log('-- windoHeight为窗口高度:', that.pH);
                console.log('-- 元素高度:', pH - data.top);
                that.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
                   }).exec()
                }
            })
          },

• 获取多个元素在页面的高度

export default {
    getSystemInfo(key) {
        return new Promise(function(resolve, reject) {
            uni.getSystemInfo({
                success(res) {
                    key ? resolve(res[key]) : resolve(res)
                }
            })
        })
    },
    getDomHeight(_this, selector) {
        return new Promise(function(resolve, reject) {
            const query = uni.createSelectorQuery().in(_this);
            query.select(selector).boundingClientRect(data => {
                resolve(data.height)
            }).exec();
        })
    },
    async getScrollViewHeight(_this, arr) {
        let height = 0
        let windowHeight = await this.getSystemInfo('windowHeight')
        for (let i = 0; i < arr.length; i++) {
            let h = await this.getDomHeight(_this, arr[I])
            height += h
        }
        return windowHeight - height
    }
}

使用:

// 在页面中使用 ， this是当前页面中的this， arr 是包含dom类名的数组
async onReady() {
       //  顶部搜索栏 和 轮播图 的类名
    let arr = ['.search-block','.swiper-block']
    this.height = await scrollView.getScrollViewHeight(this, arr)
},