微信小程序的高度和scroll-view

最近写微信小程序,虽然很多人吐槽微信开发的设计者以及开发人员,在这里我也想吐槽,卧槽....(脑补)。

一、 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,让其使用者知道在刷新中。

推荐阅读更多精彩内容