小程序scroll-view的高度多少才不會出現(xiàn)頁面滾動條

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滾動條和頁面滾動條的區(qū)別，不要混淆，可以做以下嘗試：將js代碼中的scrollHeight:sysInfo.windowHeight-100/times的times去掉，然后在各個像素不同的手機中查看效果）
網(wǎng)上說法：
有人說在onload里獲取systemInfo有時會造成windowHeight不正確，可以在onshow里面獲取，這個問題可以注意一下，不過我沒遇到過，在onload里面獲取也正常

20190831115238101.png

BLUE區(qū)域還是可以正常全部顯示

本文只做記錄，防止丟失，原文--->鏈接