(01)、uni-app 计算scroll-view所占手机屏幕的 剩余高度

uni-app 获取自定义可视化高度 1.问题场景 直接上图 我想获取下面的view 可视化高度 下边图片标记的框保证数据多时，内容可以滑动 做到看视频时 可以看到下方内容。 2.解决思路 从上图可见 使用页面的总体高度 - 减去 标题的红框上方的高度（多余高度）即可解决此类问题。 也就是说 height = pageHeight - otherHeight； 3.官网描述(动态获取节点信息...

官方文档：https://uniapp.dcloud.net.cn/api/system/info.html。

scroll-view滚动范围不支持通过百分比以及flex：1进行设置，所以需要计算出一个准确的高度；通过获取根标签下所有一级标签高度以及设置的上下外边距之和，再由根标签高度进行相减最终得出滚动高度。

https://uniapp.dcloud.io/api/system/info?id=getsysteminfo uni.getSystemInfo({ success: (res) => { this.windowHeight = res.windowHeight } }); windowHeight不包含NavigationBar和TabBar的高度

开发环境：小程序、uniapp + vue3 + ts实现功能：列表页面实现，区域滚动、下拉刷新、上拉加载更多，效果如图：正常：下拉刷新：

uni-app——uniapp 中 scroll-view 上下滑动卡顿

uni-app api 获取系统信息（高、宽）用法及封装

模板js。

uniapp 的组件scroll-view在实现触底加载的功能的时候，首先在App上可以滚动，就必须设置高度；触底加载的动态效果，会发起网络请求的，不用设置height，通过css设置min-height:0

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

如图可见，在页面滚动过程中，顶部导航栏和底栏未动，仅中间的内容区域可滚动。自定义的顶部导航栏，可参考博文。

uniapp 获取页面可用高度 *在created*中 let _this = this; const query = uni.createSelectorQuery().in(this); query .select("#website-list") .boundingClientRect((data) => { console.log("得到布局位置信息" + JSON.stringify(data)); _this.

uniapp 设置元素占用剩余高度

uni.getWindowInfo() | uni-app官网。

在使用uniapp开发项目过程中有时候会想让一些组件占有屏幕剩余的高度，但是直接设置高度显然不能适配所有尺寸的手机，因此这里提供一种动态设置组件高度的方法。高度适配本身不难，但是里面的细节其实也需要注意。所以还是要一直学习下去啊！