收藏
回答

自定义导航栏布局跳动问题

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 需求 客户端 6.7.1 2.2.3 [162]

- 需求的场景描述(希望解决的问题)


navigationStyle="custom" 时,在真机环境下页面渲染有跳动。


观察发现初次渲染时 Window 高度为有系统固定导航条的高度,大约100-300毫秒之后才变成没有固定导航条的高度,导致使用 bottom 绝对定位的元素有跳动感。


同时,由于高度变化是发生在组件 ready 事件之后,导致使用 SelectorQuery 测量元素位置和尺寸可能不准确,目前只能使用延迟几百毫秒后再调用 SelectorQuery ,但是,这个高度变化的延迟时间并不可预测,一些情况下延迟 500 毫秒还会出现问题,增加延迟时间又会影响体验。


我不知道框架开发者使用了什么黑科技,当我使用远程调试时这个问题就消失了。



- 希望提供的能力


navigationStyle="custom" 时,页面初始高度就是整个 Window 的高度,如果没法解决,希望把高度变化放到 ready 事件之前,或者增加一个页面高度变更事件。


备注:我使用 Component 构造器来作为页面,而不是 Page 。


回答关注问题邀请回答
收藏

1 个回答

  • ljy
    ljy
    2018-08-19

    我也遇到了这个问题,是自定义了底部导航栏和顶部标题栏,我的一个不完美的解决方案是给底部导航栏(也就是bottom定位的元素加了一个向上滑出的过渡效果。我觉得最好的解决办法还是系统级的修复这个问题。

    2018-08-19
    有用
    回复 1
    • 水浸街
      水浸街
      2018-08-19

      谢谢,对于使用 bottom 定位的元素跳动还勉强能接受,但对于需要根据元素显示高度来计算的元素就没有好的办法解决,我需要在屏幕中间显示图片,高度恰好充满显示区域,宽度超出时可左右滚动,但 image 只提供了widthFix 模式,没有 heightFix 模式,所以需要自己计算,如果高度不准确则显示就不正确。

      2018-08-19
      回复
登录 后发表内容