收藏
回答

小程序 scroll-view 组件长度溢出造成元素挤压问题

问题模块
API和组件

小程序中现需要加入筛选功能,实现手段是:在页面中新建一个 <view>,作为筛选栏固定在屏幕上;之后,小程序获取 window 高度,减去筛选栏的高度,写入 data.listHeight,再设定给 <scroll-view>,以便将空间让位给筛选栏。

但在编写新版本代码的时候,<scroll-view> 似乎出现了异常情况。<scroll-view> 似乎无视了 style='height: '{{listHeight}}'',将新增的筛选栏遮挡在后面。

异常情况(iPhone 6 Plus):

正常情况(Nexus 6P):

另外,在使用 Flex 的时候,出现了 flex-grow 属性异常的问题。

不知道有没有人遇到了类似情况?

最后一次编辑于  2017-04-12  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

7 个回答

  • Tooko
    Tooko
    2017-04-12

    筛选栏的height是用rpx定义的吗。以前我用px计算长度总是在iphone上出现布局不一致。换成官方的rpx重头来一次就正常了。可能跟苹果的奇葩分辨率有关。不知你是不是这个情况

    2017-04-12
    赞同
    回复
  • Telegram @Astrian
    Telegram @Astrian
    2017-04-12

    @Tooko
    nope,严格来说,这个问题只有在我自己的 Nexus 6P 上不会复现,其他所有的机器都会有问题……而且筛选栏 px、rpx 和 % 都试过了,问题依然会复现,甚至在我自己的机器上会有两次获取 window 高度有差异的问题,特别谜

    2017-04-12
    赞同
    回复
  • 回梦無痕
    回梦無痕
    2017-04-12

    要用setData,

    不能直接写入 data.listHeight

    2017-04-12
    赞同
    回复
  • Tooko
    Tooko
    2017-04-12

    先曲线解决一下,以后慢慢看是啥问题。把scroll-view的class设置为{height: 100%;padding-top: viewHeight}

    2017-04-12
    赞同
    回复
  • Telegram @Astrian
    Telegram @Astrian
    2017-04-12

    @回梦無痕
    就是用的 setData({listHeight: int}) 的方式,只是为了快速表达而已

    @Tooko
    已经打算开新分支来曲线一下了…不过你这个方法我之前还没想到,我回头试试

    2017-04-12
    赞同
    回复
  • 回梦無痕
    回梦無痕
    2017-04-12

    <view></view>

    <scroll-view></scroll-view>

    奇怪,按照上面的布局,就算scroll-view高度再高,也只会向下方,怎么会向上挤?

    2017-04-12
    赞同
    回复
  • Telegram @Astrian
    Telegram @Astrian
    2017-04-12


    @回梦無痕
    我也奇怪……在考虑是不是微信的问题。


    2017-04-12
    赞同
    回复