UNIAPP中scroll-view高度自适应

本文最后更新于$day天前,文中所描述的信息可能已发生改变。

写程序总有不少坑,网站方法千千万,找到一个适合自己才最重要。

一、我的需求

由于UNIAPP计算高度在各个平台非常复杂,HTML5有导航栏,微信小程序有胶囊位置。正常来说,我们获取【整个设备的高度-状态栏高度-导航栏高度-tabbar高度-工具栏高度】 ,我们才能获取我们需要设置的高度。获取过程根据不同设备、平台会导致异常调试麻烦。

二、我的方法

首先,我们把Srcroll-view 嵌套在View内,并且把高度设置为0,绑定style。使用getSystemInfo函数的windowHeight获取内部大小,这样我们就不需要获取设备大小。直接减去固定高度的工具栏,即可计算出Scroll-view的高度。为什么我们高度一开始要设置为0,因为如果文章过长,而没设置高度,会导致windowHeight的值为整个页面高度,包括了溢出的高度,这样子我们就无法计算内容页的高度了。

1
2
3
4
<view :style="[{height:stockListHeight + 'px'}]">
<scroll-view>
</scroll-view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
export default {
data() {
return {
stockListHeight: 0
}
},
methods: {

},
onReady() {
var _self = this;
uni.getSystemInfo({
success: (e) => { // resu 可以获取当前屏幕的高度
_self.stockListHeight = e.windowHeight - uni.upx2px(135);
},
fail: (res) => {
}
})
}
}
</script>

记得第一个嵌套View要给他设置一个overflow: scroll;要不它会把他撑开。导致滚动的意义消失了