最近写微信小程序，虽然很多人吐槽微信开发的设计者以及开发人员，在这里我也想吐槽，卧槽....(脑补)。
一、 wx.getSystemInfo 的相关高度
// 状态栏的高度，单位px
statusBarHeight;
// 屏幕高度，单位px
screenHeight
// 可使用窗口高度，单位px
windowHeight = screenHeight - 微信自己的navBar - 微信自己的tabBar
二、计算内容区高度
如果你是用微信官方的导航栏以及 TabBar 那么恭喜你不需要计算，如果是自定义的画就必须要计算了，因为不管是自定义导航栏还是 TabBar ，都会导致滚动条可以直接在导航栏或 TabBar 显示，这明显不是我们 想要的，我们更希望滚动条是在内容区显示的。
我们得知 windowHeight 的高度会减去微信自带的，那自定义的肯定要自己去减了
// 可使用窗口高度，单位px
height = windowHeight - 自定义导航高度 || 自定义TabBar高度
在这里在分享下，由于有的页面有 TabBar 有的页面没有，所以要准备两个高度。
// 可使用窗口高度，单位px
height1 = windowHeight - 自定义导航高度 - 自定义 TabBar 高度
height2 = windowHeight - 自定义导航高度
列入以下页面就没有 TabBar
三、scroll-view 相关问题
既然自定义了导航和 TabBer，那还想要上拉刷新下拉加载我们就必须用微信的 scroll-view了，但这个东西是真的bug多，且微信官方又一直在逃避不给解决。
我们得知内容高度后设置给 scroll-view 以为就没有问题了吗？显然不是的，我测试了一下(以下问题只会出现在真机中)， 具体问题看这里，暂时未发现什么原因导致，且没有解决，但出现的环境是我一个页面上有4个Tab来回切换，我用的是 wx:if 控制在一个页面显示不同内容。(这种方式行不通换种方式) -- 更新：搞定了，每个 Tab 不同内容都套上 scroll-view，让他们互不相干就行。
无 TabBar 页面切换到有TabBar页面，或者有TabBar切换到无TabBar，内容高度不准确，很明显就是我上面说的给两个高度。
四、多方测试后的最终结果
不要使用小程序里的 scroll-view，不要使用小程序里的 scroll-view，不要使用小程序里的 scroll-view。
scroll-view会存在下拉失效等问题，或拉一半等问题，推荐原生把，如果不是做自定义导航栏的，原生是最方便的，自定义了也不急还是原生，把scroll-view 换成 view，给view高度，其具备滚动条就行。
经过我多方调研，很多小程序压根就没有下拉刷新的需求，除了京东，美团小程序是我看到有下拉刷新的，但他们的方式也是用的原生的，且还是自定义导航栏，自定义的导航栏会挡住原生下拉刷新的效果显示，所以京东就在自定义导航栏加了一个loding，让其使用者知道在刷新中。
网友评论