技术概述

在使用uniapp开发项目过程中有时候会想让一些组件占有屏幕剩余的高度，但是直接设置高度显然不能适配所有尺寸的手机，因此这里提供一种动态设置组件高度的方法。

技术详述

技术使用场景

这里以我在项目中使用的scroll-view为例。这个组件是一个可滚动组件，具体的使用方法就不展开描述了，这里只说一个要点：该组件必须提前指定一个高度。很明显如果直接指定一个高度的话面对不同尺寸的机型就会出现一些不太美观的情况。比如这样：

三个图标下面到底部导航栏的一块区域应该要都被scroll-view所填充，因此这里显然需要动态改变这个组件的高度。

实现方法

得益于Vue框架的便利，首先我们在data对象中新加入一个变量svHeight

data() {
            return {
                svHeight: 0,
            }
        },

然后将这个值赋给你所需要动态改变高度的组件，同时为你的这个组件添加一个id属性（方便后续获取到这个组件）

<view id="scroll-post-list">
    <scroll-view scroll-y="true" 
        :style="'height: '+svHeight+'px;'" style="overflow: hidden;">
    </scroll-view>
</view>

接着在页面的onReady生命周期函数中写入以下代码：

onReady() {
            let that=this;
            uni.getSystemInfo({
                success: function(res) {
                    uni.createSelectorQuery().select("#scroll-post-list")
                        .boundingClientRect(function(data) {
                            that.svHeight= (res.windowHeight - data.top);
                        }).exec();
                }
            });
        },

其中uni.createSelectorQuery().select(“#scroll-post-list”).boundingClientRect函数可以获取到id为scroll-post-list的容器在当前页面的位置信息。这里的select函数其实和CSS中的选择器是差不多的，也就是说还可以通过类或者元素名来选择组件。
实现之后的效果就如下图所示，scroll-view充满了底部导航栏到scroll-view开始的剩下的高度。

遇到的困难和解决过程

其实这个本来是没有什么难度的，但是之前我在写的时候漏抄了

let that=this;

这就导致我在success回调中获取不到svHeight这个实例。由于对Vue不熟练所以之前卡了我挺久的。后面查阅相关资料后发现是this作用域的问题。

onReady() {
            uni.getSystemInfo({
                success: function(res) {
                    uni.createSelectorQuery().select("#scroll-post-list")
                        .boundingClientRect(function(data) {
                            this.svHeight= (res.windowHeight - data.top);
                        }).exec();
                }
            });
        },

上面这段代码里面，this指向的是所在函数本身，因此在boundingClientRect函数参数内部是获取不到svHeight这个变量的。当然解决方案不止是我上面所给代码一种，还可以通过箭头函数来继承上一级的作用域。如下：

onReady() {
            uni.getSystemInfo({
                success: (res) => {
                    uni.createSelectorQuery().select("#scroll-post-list")
                        .boundingClientRect((data) => {
                            this.svHeight= (res.windowHeight - data.top);
                        }).exec();
                }
            });
        },

但是这么做的后果就是始终无法获取到函数本身，因此更加推荐的写法还是在函数外部用一个变量代替this获取到Vue对象的实例。

onReady() {
            let that=this;
            uni.getSystemInfo({
                success: function(res) {
                    uni.createSelectorQuery().select("#scroll-post-list")
                        .boundingClientRect(function(data) {
                            that.svHeight= (res.windowHeight - data.top);
                        }).exec();
                }
            });
        },

总结

高度适配本身不难，但是里面的细节其实也需要注意。所以还是要一直学习下去啊！

参考博客

关于VUE中THIS作用域说明，以及一个THIS->UNDEFINED问题的处理 作者：z302766296
uni-app开发小程序中scroll-view的高度设置为剩余可用高度的方法

转载请注明 https://bbs.csdn.net/topics/607142926