UNIAPP中scroll-view高度自适应

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

一、我的需求

由于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;要不它会把他撑开。导致滚动的意义消失了