小程序 scroll-view 组件长度溢出造成元素挤压问题
发布于 5 年前 作者 xiuying46 411 次浏览 来自 问答

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

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

异常情况（iPhone 6 Plus）：

正常情况（Nexus 6P）：

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

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

7 回复

<view></view>

<scroll-view></scroll-view>

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

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

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

要用setData,

不能直接写入 data.listHeight

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

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

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

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

回到顶部