小程序scroll-vew高度设置

小程序scroll-view的高度多少才不会出现页面滚动条

wxml代码：

wxss代码：

.top {
height: 100rpx;
background: green;
}
.red{
height: 400rpx;
background: red;
}
.blue{
height: 400rpx;
background: blue;
}

js代码：

onLoad: function (options) {
let sysInfo = wx.getSystemInfoSync()
let times = 750 / sysInfo.windowWidth
//计算出一个像素有多少rpx
this.setData({
scrollHeight:sysInfo.windowHeight-100/times
//减掉顶部部分有多少像素，剩下的就是scroll-view的高度
})
}

效果：

20190831113650505.png

然而，scroll-view中的滚动条很难看，怎么去掉呢：
在app.wxss中添加以下代码

::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}

（ps:请注意本文提到的scroll-view滚动条和页面滚动条的区别，不要混淆，可以做以下尝试：将js代码中的scrollHeight:sysInfo.windowHeight-100/times的times去掉，然后在各个像素不同的手机中查看效果）
网上说法：
有人说在onload里获取systemInfo有时会造成windowHeight不正确，可以在onshow里面获取，这个问题可以注意一下，不过我没遇到过，在onload里面获取也正常

20190831115238101.png

BLUE区域还是可以正常全部显示

本文只做记录，防止丢失，原文--->链接